Select 个属性值在值列表中的元素

Question

具有以下 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>

我需要select所有那些具有data-test属性值的预定义值集才能改变，例如，背景颜色。这些值存储在管道分隔值字符串中：

foo|lol|lorem|cartman

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

由于值列表将来可能会发生变化，我想写一个动态的selector基于上面提供的字符串列表。

现在我正在使用以下代码构建 selector

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 功能可以用更少的代码完成相同的工作，或者您能建议一种更好的方法来实现预期的结果吗？

谢谢

Answer 1

您可以使用.filter()

Reduce the set of matched elements to those that match the selector or pass the function's test.

//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

Select 个属性值在值列表中的元素

Select elements with attribute value in a list of values

jquery

attributes

jquery-selectors