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

Question

可能的重复：
jQuery 多类选择器

我有一个输入字段“#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蕉”，任何以apple或banana为类的li都会fadeIn()。如何编辑此函数，以便只有类中同时包含苹果和香蕉的 li 才会 fadeIn()？

Answer 1

如何选择具有多个类的元素？

也尝试一下：

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 仅匹配包含 all 类的元素

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

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