正文 

当前位置： 首页 > 知识 >

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

     2023-03-05     253

关键词：

【中文标题】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);

【讨论】：

从使用 jQuery 的代码中指定的元素中选择具有给定类的下一个元素

】从使用jQuery的代码中指定的元素中选择具有给定类的下一个元素【英文标题】：SelectingthenextelementwithagivenclassfromanelementspecifiedincodewithjQuery【发布时间】：2012-02-2116:19:27【问题描述】：我现在已经尝试了很多选项！我有一组包... 查看详情

所有可能的组合，从多个 ArrayLists 中选择一项 [重复]

...有课程。用户将输入他想为特定学期学习的课程，程序将根据用户输入生成所有可能的时间表。（例如，一门 查看详情

带有输入元素的td的css选择器[重复]

...表格单元格？【问题讨论】：Jeremy，你能澄清一下：你想根据td元素是否包含输入元素 查看详情

带有输入元素的td的css选择器[重复]

...表格单元格？【问题讨论】：Jeremy，你能澄清一下：你想根据td元素是否包含输入元素 查看详情

jQuery 选择器：获取包含特定单词的第一个元素类的内容

】jQuery选择器：获取包含特定单词的第一个元素类的内容【英文标题】：jQueryselector:getthecontentof1stelementclasscontainingspecificword【发布时间】：2012-01-2509:46:26【问题描述】：快速jQuery选择器问题：我需要获取第一个元素(div/span/...)的... 查看详情

jQuery - 选择输入字段的关联标签元素[重复]

】jQuery-选择输入字段的关联标签元素[重复]【英文标题】：jQuery-selecttheassociatedlabelelementofainputfield[duplicate]【发布时间】：2011-06-1804:37:17【问题描述】：我有一组输入字段，其中一些有关联的标签，一些没有：<labelfor="bla">bla... 查看详情

选择没有任何类的元素[重复]

...【发布时间】：2011-06-2620:50:45【问题描述】：我需要通过jQuery选择器找到页面中没有类的所有span。例子：<spanclass=\'Cool\'>donotfoundme</span><span>me,me,takemeplease!!!</span 查看详情

使用 jQuery 访问具有多个类的元素

】使用jQuery访问具有多个类的元素【英文标题】：AccesselementshavingmultipleclassesusingjQuery【发布时间】：2012-09-2405:57:12【问题描述】：有时我们定义了一些具有多个类的元素，例如：-<divclass="abc">Hithisisdivwithmultipleclasses</div>... 查看详情

html表单与输入实例

...t;元素是最重要的表单元素。<input>元素有很多形态，根据不同的type属性。这是本章中使用的类型：类型描述text定义常规文本输入。radio定义单选按钮输入（选择多个选择之一）submit定 查看详情

jQuery - 根据输入链接中粘贴的链接选择一个选项

】jQuery-根据输入链接中粘贴的链接选择一个选项【英文标题】：jQuery-Selectaoptionbasedonwhatlinkhasbeenpasteininputlink【发布时间】：2017-09-1815:10:27【问题描述】：在我的表单中，我有一个inputtag和一个selecttag。我的inputtag将始终粘贴一个... 查看详情

jQuery使用同一类的多个按钮返回一个值[重复]

】jQuery使用同一类的多个按钮返回一个值[重复]【英文标题】：jQueryusingmultiplebuttonsofthesameclasstoreturnavalue[duplicate]【发布时间】：2015-08-0400:38:00【问题描述】：我有一个由PHP生成的条目列表，每个条目都在自己的div中，并且每个... 查看详情

jquery根据选择值从表中填充文本输入

】jquery根据选择值从表中填充文本输入【英文标题】：jquerypopulatetextinputfromtablebasedonselectvalue【发布时间】：2010-09-0708:45:09【问题描述】：我有一个表单，其中包含一个名为Client_ID的选择以及一些其他文本输入。我需要的是，当... 查看详情

使用 jQuery 选择器来定位和替换包含 HTML 的字符串中的元素 [重复]

】使用jQuery选择器来定位和替换包含HTML的字符串中的元素[重复]【英文标题】：UsejQueryselectorstotargetandreplaceelementsinastringcontainingHTML[duplicate]【发布时间】：2014-09-1212:31:27【问题描述】：我有一个包含HTML的字符串，例如varmyString="&... 查看详情

jquery根据name属性进行选择

$("div[class]")选择所有含有class属性的div元素 $("input[name=‘keyl‘]")选择所有的name属性等于‘keyl‘的input元素 $("input[name!=‘keyl‘]")选择所有的name属性不等于‘keyl‘的input元素 $("input[name^=‘keyl‘]")选择所有的name属性以... 查看详情

如何根据表单输入添加动态复选框？

】如何根据表单输入添加动态复选框？【英文标题】：Howtoadddynamiccheckboxesbasedonforminput?【发布时间】：2020-01-2914:55:48【问题描述】：上下文用户可以填写一个可以选择bike_type的订单表格，从而选择属于该bike_type的选项。现状根据... 查看详情

jquery选择器

 一．选择器的分类：基本选择器，层次选择器，过滤选择器，1.基本选择器：A.#id:根据给定一个ID匹配一个元素，ID不能在文档中重复，得到的是唯一元素。如$(“#one”).css(“background”,”red”)B..class根据给定类名匹配一个元... 查看详情

用户选择/多输入上的多个单独图

...ultiinput【发布时间】：2021-07-1600:07:57【问题描述】：我想根据用户输入来可视化绘图。我有一个下拉菜单，如果用户从给定的选项中选择一个或多个变量，代码会根据用户输入自动可视化每个变量的单独图。代码：这就是我尝试... 查看详情

Jquery通过'data-id'选择元素[重复]

】Jquery通过\\\'data-id\\\'选择元素[重复]【英文标题】：Jqueryselectingelementby\'data-id\'[duplicate]Jquery通过\'data-id\'选择元素[重复]【发布时间】：2014-06-1108:47:10【问题描述】：与questionhere类似，我需要根据其data-id获取一个元素。我遇到... 查看详情