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

Posted 2023-03-05

【中文标题】Jquery根据用户输入选择包含多个类的元素[重复]

【英文标题】：Jquery select an element containing multiple classes with based on user input [duplicate]

【发布时间】：2011-04-27 20:02:52

【问题描述】：

可能重复：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，而不管查询中的单词数量如何。所以，如果我输入“苹果香蕉”，任何以苹果或香蕉为类的 li 都会淡入淡出（）。我如何编辑这个函数，以便只有在其类中同时具有苹果和香蕉的 li 才会淡入淡出（）？

【问题讨论】：

你到底想要什么？文本“苹果香蕉”只匹配中间的 li，还是匹配所有 3 个？文本“香蕉苹果”怎么样？它应该匹配其中任何一个吗？附带说明：我认为当变量有多个字母名称时，大多数人会发现阅读代码更容易。我认为描述性变量可以提高代码质量。此外，您可以使用“。”类的选择器。所以 "li ."+qs[n] 如果相等的话可能会更容易阅读（我不知道星星课后会做什么）

对不起，我的意思是同时匹配苹果和香蕉。编辑了我的消息。

仅供参考 - 您可以使用 .hasClass() 来测试元素是否具有指定的类。

【参考方案1】：

How can I select an element with multiple classes?

也试试这个：

函数查询数据（） $('.item').fadeOut(300); $("李."+ ( $('#q') .val() .toLowerCase() .split(/\s+/) 。加入（'。'） ) ).fadeIn(1000);

【参考方案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);