在值列表中选择具有属性值的元素

关键词：

【中文标题】在值列表中选择具有属性值的元素【英文标题】：Select elements with attribute value in a list of values 【发布时间】：2016-02-03 10:22:47 【问题描述】：

具有以下 html 元素

<div id="container">
    <div data-test="foo">foo</div>
    <div data-test="bar">bar</div>
    <div data-test="lol">lol</div>
    <div data-test="lorem">lorem</div>
    <div data-test="burger">burger</div>
</div>

我需要在一组预定义的值中选择所有具有data-test 属性值的对象，以便更改例如背景颜色。这些值存储在管道分隔值字符串中：

foo|lol|lorem|cartman

基于此示例，预期结果是将背景颜色仅更改为具有data-test='foo' OR data-test='lol' OR data-test='lorem' OR data-test='cartman' 的那些div。

由于值列表将来可能会发生变化，我想根据上面提供的字符串列表编写一个动态选择器。

现在我正在使用以下代码来构建选择器

var list = 'foo|lol|lorem|cartman';
var search = "[data-test='" + list.split("|").join("'],[data-test='") + "']";
$("#container").find(search).css("background", "red")

Find a fiddle here

是否有任何 jquery 功能可以用更少的代码完成相同的工作，或者您能否提出更好的方法来实现所需的结果？

谢谢

【问题讨论】：

【参考方案1】：

您可以使用.filter()

将匹配元素集减少为匹配选择器或通过函数测试的元素。

//Create an array
var list = 'foo|lol|lorem|cartman'.split('|'); 

//Filter elements
$("#container div[data-test]").filter(function()
    //Test whether data exists in the list
    return list.indexOf($(this).data('test')) > -1;
).css("background", "red")

Fiddle

【讨论】：

SimpleXML：选择具有特定属性值的元素

】SimpleXML：选择具有特定属性值的元素【英文标题】：SimpleXML:SelectingElementsWhichHaveACertainAttributeValue【发布时间】：2010-11-0219:25:03【问题描述】：在XML文档中，我有共享相同名称的元素，但属性的值定义了它是什么类型的数据，... 查看详情

css 或 xpath 选择器：具有特定值的任何属性的元素

】css或xpath选择器：具有特定值的任何属性的元素【英文标题】：cssorxpathselector:elementswhichhaveanyattributewithspecificvalue【发布时间】：2011-08-0319:20:26【问题描述】：我想匹配HTMLDom树中具有任何值为“foo”的属性的所有元素。它应该... 查看详情

具有特定属性名称和值的 Scrapy .css 选择元素

】具有特定属性名称和值的Scrapy.css选择元素【英文标题】：Scrapy.cssselectelementwithaspecificattributenameandvalue【发布时间】：2017-02-1008:23:48【问题描述】：如何使用Scrapy选择具有特定属性名称和值的元素的文本？例如，<spanproperty="ci... 查看详情

jQuery - 从类的元素中获取属性值的列表

】jQuery-从类的元素中获取属性值的列表【英文标题】：jQuery-getalistofvaluesofanattributefromelementsofaclass【发布时间】：2011-02-1418:58:35【问题描述】：我有一个类.object，它有一个名为level的属性。我想在页面上获取level的所有不同值的... 查看详情

Python列表查找具有接近值的元素

】Python列表查找具有接近值的元素【英文标题】：Pythonlistfindelementswithclosevalue【发布时间】：2016-11-2304:41:00【问题描述】：首先，这不是重复的帖子；我的问题与我在本网站上搜索的问题不同，但如果您发现已回答的问题，请随... 查看详情

无论值如何，如何从选择器中排除具有属性的元素

】无论值如何，如何从选择器中排除具有属性的元素【英文标题】：Howtoexcludeelementwithattributefromselectorregardlessofvalue【发布时间】：2020-08-0307:07:58【问题描述】：我正在开发一个在屏幕上创建某些元素的框架，这些元素在任何情... 查看详情

如何使用 LINQ 选择具有最小或最大属性值的对象

...的Person对象。有没有一种方法可以使用LINQ查询Person对象列表中具有最早/最小DateOfBirth值的对象？这是我开始的：var 查看详情

css2

css语法：*格式：选择器{属性名1:属性值1;属性名2:属性值2;...}*选择器:筛选具有相似特征的元素*注意：*每一对属性需要使用；隔开，最后一对属性可以不加；选择器：筛选具有相似特征的元素分类：基础选择器id选择器：选择具... 查看详情

在具有显式键值的对象列表中查找元素

】在具有显式键值的对象列表中查找元素【英文标题】：Findelementinlistofobjectswithexplicitkeyvalue【发布时间】：2014-10-2102:17:20【问题描述】：我在python中有一个对象列表：accounts=[\'id\':1,\'title\':\'ExampleAccount1\',\'id\':2,\'title\':\'Gowtogetth... 查看详情

jquery选择器

选择器总结：核心选择器（应用最广泛的选择器）*选择所有元素元素选择特定类型的元素.类名选择具有特定class的元素元素.类名选择具有特定class的某类元素#id选择具有特定id属性值的元素属性选择器（根据元素的属性来选择元... 查看详情

如何通过Javascript从选择列表中添加具有值的HTML文本字段

】如何通过Javascript从选择列表中添加具有值的HTML文本字段【英文标题】：HowtoaddHTMLtextfieldwithvaluefromselectlistviaJavascript【发布时间】：2016-07-3118:16:26【问题描述】：我有这样的选择列表：$.fn.optionTest=function(opts)varoption=$.extend(,$.fn.... 查看详情

在列表中查找具有值的最小字典键的 Pythonic 方法？

】在列表中查找具有值的最小字典键的Pythonic方法？【英文标题】：Pythonicwaytofindaminimumdictionarykeywithvalueinalist?【发布时间】：2021-10-1721:17:49【问题描述】：我正在用Python编写Astar算法的实现，有时我想选择open_set中具有最低f_scorev... 查看详情

具有列表值的列，如果列表具有超过 1 个元素，则解码这两个值并包含在新列的同一行中的列表中

】具有列表值的列，如果列表具有超过1个元素，则解码这两个值并包含在新列的同一行中的列表中【英文标题】：Columnwithlistvalues,iflisthasmorethan1element,decodebothvaluesandincludeinalistinthesamerowinnewcolumn【发布时间】：2022-01-1804:43:22【问... 查看详情

在类列表中找到具有最小属性“X”的列表元素

】在类列表中找到具有最小属性“X”的列表元素【英文标题】：Findthelistelement,inalistofclasses,thathastheminimumattribute`X`【发布时间】：2018-04-2112:21:59【问题描述】：我如何才能确定类列表中的哪个元素具有最小属性X，以及列表中的... 查看详情

将具有相同 XML 元素和相同属性名称但不同属性值的 JAXB 解组到不同的 Java 对象中

】将具有相同XML元素和相同属性名称但不同属性值的JAXB解组到不同的Java对象中【英文标题】：JAXBUnmarshallinghavingsameXMLelementsandsameattributenamesbutdifferentattributevaluesintodifferentJavaobjects【发布时间】：2021-10-0808:47:19【问题描述】：我... 查看详情

具有特定值的任何属性的所有元素的 XPath？

】具有特定值的任何属性的所有元素的XPath？【英文标题】：XPathforallelementswithanyattributewithspecificvalue?【发布时间】：2016-06-2523:15:14【问题描述】：我正在使用Selenium来识别任何可能在其任何属性中具有指定值的HTML元素。我希望XP... 查看详情

Oracle XMLType - 迭代具有某些属性值的元素

】OracleXMLType-迭代具有某些属性值的元素【英文标题】：OracleXMLType-iteratingoverelementswithcertainattributevalues【发布时间】：2015-07-0109:27:28【问题描述】：我在Oracle数据库的一个字段中存储了以下xml：Activitymc:Ignorable="sapsap2010sads"x:Class=... 查看详情

jQuery创建具有选定属性和值的对象

...家、城市、邮编选择选项。现在我的要求是当有人从下拉列表中更改值时，它应该创建一个具有选定值的数组对象。所以为了实现这一点，我做了这样的事情varSearchParams=[];jQuery(\'.form-type- 查看详情