2015-11-03 80 views
2

拥有的列表中选择与属性值的元素下面的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的功能达到预期的效果?

感谢

回答

2

您可以使用.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