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

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>

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

foo|lol|lorem|cartman

根据此示例，预期结果是仅将背景颜色更改为具有 data-test='foo' 或 data-test='lol' 的 div > 或data-test='lorem' 或data-test='cartman'。

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

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

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