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

Posted 2023-05-09

【中文标题】在值列表中选择具有属性值的元素

【英文标题】：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