Присвоить класс дочернему элементу в соответствии со значением дата-атрибута родителя

Question

Не могу понять, как реализовать следующий скрипт. Есть списки, каждый из которых получает своё уникальное значение. Необходимо, чтобы к нужному элементу списка, был присвоен класс active в соответствии со значением дата-атрибута родителя. Привожу пример, как должно выглядеть:

<ul class="list" data-index="1">
  <li class="list-item active">1</li>
  <li class="list-item">2</li>
  <li class="list-item">3</li>
</ul>

<ul class="list" data-index="2">
  <li class="list-item">4</li>
  <li class="list-item active">5</li>
  <li class="list-item">6</li>
</ul>

<ul class="list" data-index="3">
  <li class="list-item">7</li>
  <li class="list-item">8</li>
  <li class="list-item active">9</li>
</ul>

Прикладываю живой пример: https://jsfiddle.net/j93avdpg/6/

Answer 1

То есть изначально .active нет и их надо добавить?

$(".list").each(function(){
  let idx = $(this).data('index') - 1;
  $(this).children().eq(idx).addClass('active');
});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list" data-index="1">
  <li class="list-item ">1</li>
  <li class="list-item">2</li>
  <li class="list-item">3</li>
</ul>

<ul class="list" data-index="2">
  <li class="list-item">4</li>
  <li class="list-item ">5</li>
  <li class="list-item">6</li>
</ul>

<ul class="list" data-index="3">
  <li class="list-item">7</li>
  <li class="list-item">8</li>
  <li class="list-item ">9</li>
</ul>

БЛОГ НА HUSL

Присвоить класс дочернему элементу в соответствии со значением дата-атрибута родителя

Ответы (1 шт):