Выберите элементы со значением атрибута в списке значений

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' ИЛИ data-test='lol' ИЛИ 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()

Сократите набор соответствующих элементов до тех, которые соответствуют селектор или пройти тест функции.

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