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

Question

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

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

预计 output

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

Answer 1

您可以对<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), 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>

Answer 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>