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'或data-test='lorem'或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功能可以使用更少的代码执行相同的工作，或者您是否可以建议更好的方法来实现所需的结果？

由于

Answer 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

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

1 个答案: