结合两个过滤器功能，但特定的顺序答案

【问题标题】：combining two filter functions but specific order结合两个过滤器功能，但特定的顺序
【发布时间】：2021-04-01 20:52:57
【问题描述】：

我想组合两个不同的过滤器函数，但我需要按特定顺序返回的数据。这是我的代码：

html

<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
</tr>

filter1 = $('tr td').filter(function(index) {
    return index > 2
});

filter2 = $('tr td').filter(function(index) {
    return index <= 2
});

merge = $.merge(filter1, filter2);

预期输出

from fitler1
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
from filter2
<li>a</li>
<li>b</li>

我已经尝试过使用return index > 2 || index <= 2，但这样我显然得到了与 HTML 代码相同的顺序。甚至可以使用一个过滤器来实现我所追求的吗？

【问题讨论】：

标签： javascript jquery filter

【解决方案1】：

您可以对<td>s 的集合进行切片，以将它们按所需的顺序排列：

const tds = $('td');
const ordered = $.merge(tds.slice(2), tds.slice(0, 2));
console.log(ordered);

const tds = $('td');
const ordered = $.merge(tds.slice(2), tds.slice(0, 2));
console.log(ordered);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
  <td>e</td>
  <td>f</td>
</tr>
</table>

另一种选择，使用nth-child 选择器：

const ordered = $.merge(
  $('td:nth-child(2) ~ *'),
  $('td:nth-child(-n + 2)')
);
console.log(ordered);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
  <td>e</td>
  <td>f</td>
</tr>
</table>

【讨论】：

【解决方案2】：

您还可以使用 :lt() 和 :gt() 选择器简化这些过滤器

const $cells = $('td');

$.merge($cells.filter(':gt(1)'), $cells.filter(':lt(2)'))
         .each((i,el)=>  $('ul').append(`<li>${$(el).text()}</li>`))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
</table>

<ul></ul>

【讨论】：