从数组中的值中查找 DOM 个元素

Question

我有一个潜在的大 id 列表，在这个例子中：“1, 2, 4”

如何循环遍历 table 中的所有行，并将 class 添加到行与数组中的 class 匹配的元素中？（使用 jQuery/javascript）

所以这个 table:

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

edit 也可以直接使用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')

从数组中的值中查找 DOM 个元素

Find DOM elements from values in array

javascript

arrays

jquery

selector