Apply the class to the subsidiary in accordance with the date-attribution of the parent

[baileigh]

I can't figure out how to implement the next violin. Got lists.♪ Every one of which gets its own ♪ unique value♪ It is necessary that the necessary element of the list♪ active in accordance with the date-attribution value of the parent♪ Examp an example of how to look:

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

I'm: https://jsfiddle.net/j93avdpg/6/

[simrah]

I mean, originally. .active No, and they should be added?

$(".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>