價值觀

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 

基於該例子中，預期的結果是到backgound顏色改變僅具有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的功能達到預期的效果？

感謝

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