Найти DOM элементы из значений в массиве

Question

У меня есть потенциал большой список идентификаторов, в этом примере: «1, 2, 4»

Как перебрать все строки внутри таблицы и добавить класс к элемент внутри, где строка сопоставляется с классом из массива? (С использованием JQuery/JavaScript)

Так эта таблица:

<table> 
    <tr class="row-1"> 
     <td><span class="foo">1</span></td> 
    </tr> 
    <tr class="row-2"> 
     <td><span class="foo">2</span></td> 
    </tr> 
    <tr class="row-3"> 
     <td><span class="foo">3</span></td> 
    </tr> 
    <tr class="row-4"> 
     <td><span class="foo">4</span></td> 
    </tr> 
    <tr class="row-5"> 
     <td><span class="foo">5</span></td> 
    </tr> 
</table> 

Похоже, это впоследствии:

<table> 
    <tr class="row-1"> 
     <td><span class="foo bar">1</span></td> 
    </tr> 
    <tr class="row-2"> 
     <td><span class="foo bar">2</span></td> 
    </tr> 
    <tr class="row-3"> 
     <td><span class="foo">3</span></td> 
    </tr> 
    <tr class="row-4"> 
     <td><span class="foo bar">4</span></td> 
    </tr> 
    <tr class="row-5"> 
     <td><span class="foo">5</span></td> 
    </tr> 
</table> 

Answer 1

var array = [1,2,4]; // etc... 
$(array.map(function(i) {return ".row-" + i;}).join(',')).addClass('bar'); 

Fiddle

В ES6:

const array = [1,2,4]; // etc... 
$(array.map(i => `.row-${i}`).join(',')).addClass('bar'); 

Fiddle(es6)

редактировать Вы также можете использовать непосредственно reduce, т.е. (ES6)

$(`.row-${array.reduce((a, b) => `${a},.row-${b}`)}`).addClass('bar'); 

Answer 2

попробовать этот

var ids = [1,2,4]; 
 

 
$("tr[class^='row']").each(function(){ 
 
    var index = parseInt($(this)[0].className.split("-")[1], 10); 
 
    
 
    if(ids.indexOf(index) != -1) 
 
    { 
 
    $(this).addClass("bar"); 
 
    } 
 
});

.bar 
 
{ 
 
    color :red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="row-1"> 
 
     <td><span class="foo">1</span></td> 
 
    </tr> 
 
    <tr class="row-2"> 
 
     <td><span class="foo">2</span></td> 
 
    </tr> 
 
    <tr class="row-3"> 
 
     <td><span class="foo">3</span></td> 
 
    </tr> 
 
    <tr class="row-4"> 
 
     <td><span class="foo">4</span></td> 
 
    </tr> 
 
    <tr class="row-5"> 
 
     <td><span class="foo">5</span></td> 
 
    </tr> 
 
</table>

Answer 3

вы с Попробуйте следующее:

$("tr[class*='row'] td span").addClass('foo')