Question

请参阅以下代码：

<input type="text" />

<h3>Category 1</h3>
<ul id="category1">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

<h3>Category 2</h3>
<ul>
    <li>item27</li>
    <li>item28</li>
</ul>

<h3>Category 3</h3>
<ul>
    <li>item132</li>
    <li>item437</li>
</ul>

这是JS

$(function(){

    $('input[type="text"]').keyup(function(){

        var text = $(this).val().toLowerCase();

        $('ul li').each(function(){

             if($(this).text().toLowerCase().indexOf(text) == -1)
                 $(this).hide();
             else
                $(this).show();

        });     
    });

});

这将过滤列表但我的问题是如何让它过滤类别1＆amp; 2列出但不是类别3列表。我希望类别3列表保持一致，因为其他列表被过滤掉了。提前感谢您的任何建议或指导。

Answer 1

如果您向第三个id提供ul，则可以使用:not() pseudo-class将其排除。

Updated Example

$('ul:not(#category3) li').each(function() {
  // ...
});

如果必须排除多个元素，最好只排除一个特定的类。

在这种情况下，课程.exclude已添加到第三个ul元素中：

$('ul:not(.exclude) li').each(function() {
  // ...
});

Answer 2

尝试使用带有参数:lt()的{{1}}选择器返回索引小于3的{{1}}个元素

li

＆＃13;

$("ul li:lt(3)")

＆＃13;

Answer 3

如果你想跳过类别3下的任何内容，你可以

$('ul li').each(function(){
//          the li...the ul...the h3
var header=$(this)  .parent().prev().text();
if (header==="Category 3"){
return true; //return true is like `continue` in an each block
}
//...rest of your code

Answer 4

在这里使用了一些jQuery选择器魔术：$('ul').not(':last-child').children('li');抓取所有ul元素，从所选集合中移除最后ul，然后获取子节点。

$('input[type="text"]').keyup(function(){
    var text = $(this).val().toLowerCase();
    var lis = $('ul').not(':last-child').children('li');
    lis.each(function(){
        var contents = $(this).text().toLowerCase();
        $(this).toggle(contents.indexOf(text) >= 0);
    });     
});

过滤多个列表但不是全部？

4 个答案: