结合两个过滤器功能但特定顺序

如何解决结合两个过滤器功能但特定顺序

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

html

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

js

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 代码相同的顺序。甚至可以使用一个过滤器来实现我所追求的目标吗？

解决方法

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

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),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>

,

您还可以使用 :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>