Форум

zulyamodx · #1 (**permalink**) 02.11.2016, 04:51

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

Имеется такой 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. Пожалуйста, помогите. Спасибо!

Aetae · #2 (**permalink**) 02.11.2016, 05:14

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

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

zulyamodx · #3 (**permalink**) 02.11.2016, 05:41

Сообщение от Aetae

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

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 таких блоков.

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

Aetae · #4 (**permalink**) 02.11.2016, 05:44

Сообщение от zulyamodx

Скрипт корректно работает если есть только 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

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

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

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

zulyamodx · #5 (**permalink**) 02.11.2016, 06:08

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

zulyamodx · #6 (**permalink**) 02.11.2016, 16:35

Сообщение от Aetae

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

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

Форум

Справочник

Discord чат

Курсы javascript