Question

可能重复：
jQuery multiple class selector

我有一个输入字段'#q'，用户可以在其中键入搜索查询并返回一组与其匹配的列表项。

function queryData() {
   q = $('#q').val();
   q = q.toLowerCase();
   var qs = q.split(' ');
   $('.item').fadeOut(300);
   for (n in qs)        {
   $("li[class*='" + qs[n] + "']").fadeIn(1000);
                }
} 
<li class="apple"></li> <li class="apple banana"></li> <li class="banana"></li>

我不是专家，所以上面的代码看似粗糙。到目前为止，上面的代码只能显示其类与查询匹配的li，无论查询中的单词数是多少。所以，如果我输入“apple banana”，任何以苹果或香蕉为分类的li都将为fadeIn（）。我如何编辑这个函数，以便只有同类中有苹果和香蕉的li将会淡化（）？

Answer 1

How can I select an element with multiple classes?

试试这个：

function queryData() {
    $('.item').fadeOut(300);
    $("li."+
     (
      $('#q')
      .val()
      .toLowerCase()
      .split(/\s+/)
      .join('.')
     )
    ).fadeIn(1000);
}

Answer 2

我会使用术语列表来构建单个查询，例如

var qs = q.split(' ');
for (n in qs) {
    qs[n] = 'li.' + qs[n];
}
$(qs.join(', ')).fadeIn(1000);

这会在输入任何类的任何“li”中淡出。

引用的jquery-multiple-class-selector仅匹配包含所有类的元素

编辑：刚看到你的编辑（需要所有类）。在这种情况下，请尝试

$('li.' + q.replace(' ', '.')).fadeIn(1000);

Jquery根据用户输入选择包含多个类的元素

2 个答案: