Question

我正在使用name和lastname设置为div

的属性来过滤联系人列表

<div class="user" name="Sheldon" lastname="Cooper">...</div>

目前，我可以对单个属性进行部分搜索。（filter是输入文本的内容）

ContactsList.find(".user .name:not(:Contains(" + filter + "))").parent().hide();
ContactsList.find(".user .name:Contains(" + filter + ")").parent().slideDown();

我如何做到这两点？如何在两个属性中过滤那些不包含过滤器值的文件？

Answer 1

如果我理解了这个问题，你可以试试这个：

你隐藏所有

ContactsList.find('.user').parent().hide();

您显示过滤结果：

ContactsList.find('.user[name="'+ filter + '"], .user[lastname="'+ filter + '"]').parent().slideDown();

Answer 2

这样的事情可能不适用于

ContactsList.find(".user:not([name*=" + filter + "]):not([lastname*=" + filter + "])").parent().hide();

对于OR你可以这样做

ContactsList.find(".user[name*=" + filter + "], .user[lastname*=" + filter + "])").parent().hide();

另请注意*选择contain字符串

的{{3}}

Answer 3

您必须创建自定义:表达式，因为jQuery核心不会使用attribute:Contains()按照您的代码显示方式过滤属性。

还应该使用data-属性并利用jQuery data()方法来阅读它们

我建议使用filter(function)。它为您提供了比选择器更多的灵活性

HTML

<div class="user" data-name="Sheldon" data-lastname="Cooper">...</div>

JS

$('.user[name]').filter(function(){
    var term = filter.toLowerCase(),
        data = $(this).data()
        name = data.name.toLowerCase(),
        lastName = $data.lastname.toLowerCase()
    return name.indexOf(term)>-1 || lastName.indexOf(term)>-1
})

Answer 4

ContactsList.find(".user")
 .parent().hide()  // hide all parents of .user elements
 .end()  // revert collection back to .user elements
 .filter("[name*=" + filter + "], [lastname*=" + filter + "]")  // filter the collection based on attribute values
 .parent().slideDown(); // show the filtered elements

http://jsfiddle.net/r23yLfrn/2/

.find（）基于两个属性的逻辑OR

4 个答案: