Как изменить класс для всех элементов со списком идентификаторов? - PullRequest
Новая
       13

Как изменить класс для всех элементов со списком идентификаторов?

0 голосов
/ 10 июля 2019

Исходное состояние: у меня есть массив идентификаторов [45, 3, 678] и тег div с большим количеством элементов внутри, они вложены и имеют уникальные идентификаторы.Мне нужно добавить класс «selected» только для тех элементов, чьи идентификаторы находятся в массиве идентификаторов.Как я могу достичь этого?

<div id="parent-class">
  <details id=1>
    <ul id=2>
      <details id=3></details>
      <details id=4></details>
      <details id=5></details>
      ...
    </ul>
  </details>
  <details id=56>
    <ul id=57>
      <details id=58></details>
      <details id=59></details>
      <details id=60></details>
      ...
    </ul>
  </details>

</div>



$('div#parent-class').ready(function () {
    var options = [45, 3, 678];

    /* Here I need to loop through all children and assign class for those elements whose id is in array options*/
    $('div#parent-class').children().each(function(){
      var id = $(this).attr('id');
      if ($.inArray(id, options)) $(this).addClass('selected');
    });
  });

Любая помощь очень ценится

1 Ответ

0 голосов
/ 10 июля 2019

Как прокомментировал @ freedomn-m , вам нужно, чтобы ваши идентификаторы содержали хотя бы один альфа-символ, поэтому я предлагаю вам изменить идентификаторы, для цикла просто используйте селектор атрибутов, чтобы выбрать элементы в вашем массив 

$('div#parent-class').ready(function () {
    var options = [56, 3, 60];
    options.forEach(function(v,i) {
      $('[id="item_'+v+'"]').addClass('selected');
      //or $("#item_" + v).addClass('selected');
    })
  });
.selected{border:1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent-class">
  <details id="item_1">
    <ul id="item_2">
      <details id="item_3"></details>
      <details id="item_4"></details>
      <details id="item_5"></details>
      ...
    </ul>
  </details>
  <details id="item_56">
    <ul id="item_57">
      <details id="item_58"></details>
      <details id="item_59"></details>
      <details id="item_60"></details>
      ...
    </ul>
  </details>

</div>
...