Javascript-форум - Как добавлять класс к li если в div сlass = 1-5

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как добавлять класс к li если в div сlass = 1-5 (https://javascript.ru/forum/misc/65675-kak-dobavlyat-klass-k-li-esli-v-div-slass-%3D-1-5-a.html)

Как добавлять класс к li если в div сlass = 1-5

Здравствуйте.

Имеется такой html код:

<div class="rat_box">
    <ul class="rating">
     <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
    <div class="num">0</div>

    </div>

Хочу реализовать такое с помощью javascript:
Если в <div class="num">1</div>, то в 1 li class (<li class=""></li>) добавляем класс r100, а остальные 4 <li class=""></li> оставляем пустыми.
Если <div class="num">2</div>, то в двух первых<li class=""></li> к ним добавляем класс r100, то есть так:

<div class="rat_box">
    <ul class="rating">
     <li class="r100"></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
    <div class="num">1</div>

    </div>

<div class="rat_box">
    <ul class="rating">
     <li class="r100"></li><li class="r100"></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
    <div class="num">2</div>

    </div>

<div class="rat_box">
    <ul class="rating">
     <li class="r100"></li><li class="r100"></li><li class="r100"></li><li class=""></li><li class=""></li>   </ul>
    <div class="num">3</div>

    </div>

<div class="rat_box">
    <ul class="rating">
     <li class="r100"></li><li class="r100"></li><li class="r100"></li><li class="r100"></li><li class=""></li>   </ul>
    <div class="num">4</div>

    </div>

<div class="rat_box">
    <ul class="rating">
     <li class="r100"></li><li class="r100"></li><li class="r100"></li><li class="r100"></li><li class="r100"></li>   </ul>
    <div class="num">5</div>

    </div>

Такое возможно сделать с помощью javascript? Если да, пожалуйста, напишите как это сделать? В интернете искала и тут форуме тоже. Не нашла. Наверно это из-за того что я даже не знаю как называется эта функция в javascript. Пожалуйста, помогите. Спасибо!

Классический стиль:

var nums = document.querySelectorAll('div.rat_box div.num'), i = nums.length;
while(i--) 
  for(var j = 0, length = +nums[i].innerHTML, lis = nums[i].parentNode.querySelectorAll('ul.rating li'); j < length; j++) 
    if(lis[j]) lis[j].className = 'r100';

Цитата:

Сообщение от Aetae (Сообщение 433762)

Классический стиль:

var nums = document.querySelectorAll('div.rat_box div.num'), i = nums.length;
while(i--) 
  for(var j = 0, length = +nums[i].innerHTML, lis = nums[i].parentNode.querySelectorAll('ul.rating li'); j < length; j++) 
    if(lis[j]) lis[j].className = 'r100';

Здравствуйте.
Спасибо большое за помощь.
Скрипт корректно работает если есть только 1 такой блок:

<div class="rat_box">
    <ul class="rating">
     <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
    <div class="num">0</div>
 
    </div>

У меня таких блок много. Так как на странице выводятся отзывы с их оценками. У каждого отзыва по 6 таких блоков.
Каждый раз когда добавляются новые отзывы, на страницу также добавляются новые 6 таких блоков.

Может проблема не в этом? Как думаете? Спасибо.

Цитата:

Сообщение от zulyamodx (Сообщение 433763)

Скрипт корректно работает если есть только 1 такой блок:

Это не правда:

<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">0</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">1</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">2</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">3</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">3</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">4</div>
</div>
<div class="rat_box">
  <ul class="rating">
    <li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li>   </ul>
  <div class="num">5</div>
</div>
<script>
var nums = document.querySelectorAll('div.rat_box div.num'), i = nums.length;
while(i--)
  for(var j = 0, length = +nums[i].innerHTML, lis = nums[i].parentNode.querySelectorAll('ul.rating li'); j < length; j++)
    if(lis[j]) lis[j].className = 'r100';
</script>
<style>
li{float:left;padding-left:1em}
.r100{color: red}
</style>

Цитата:

Сообщение от zulyamodx (Сообщение 433763)

Каждый раз когда добавляются новые отзывы, на страницу также добавляются новые 6 таких блоков.

Каждый раз как добавляются надо вызывать этот код заново для добавленных.

Но вообще, по-хорошему, это должен делать сервер, сразу расставляя нужные классы.

Действительно, добавила код перед каждым блоком, и все заработало. Классно! Большое вам спасибо!

Цитата:

Сообщение от Aetae (Сообщение 433764)

Это не правда:

Да, я ошиблась. Оказывается я вставляла код сверху блоков. Поэтому некорректно отображало. Но после того как спустила код вниз и добавила этот js код один раз, все корректно работает.
Большое вам спасибо, что потратили на меня столько вашего времени. Я очень благодарна вам, Aetae.