1

Есть такой HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

На каждый пятый пункт нужно поставить класс five.Вот код который не работает

  $("ul").children("li").each(function() {
    var indeItem = $(this).index("li");
    if(indeItem % 5) {
      $(this).addClass("five");
    }
  });

Как это сделать?

1
  • во-первых, колбэк у each() может получать параметры - элемент и индекс, поэтому не надо вызывать index(), а просто взять параметр. Во-вторых. если вызывает index() то делать надо это без параметров, не надо туда пихать li. В третьих условие indeItem % 5 расставит вам классы на все элементы кроме пятых, это выражения проверяет остаток от деления, и он должен быть равен нулю, при этом еще надо участь сдвиг на 1, т.к. индексация с 0.
    – teran
    Commented 28 мая 2020 в 8:55

1 ответ 1

2

Все гораздо проще:

$('ul li:nth-child(5n+5)').addClass('five')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

2
  • гораздо проще вообще прописать это в css и не трогать js.
    – teran
    Commented 28 мая 2020 в 8:51
  • Тоже хотел это написать, но вдруг ему нужен для чего то новый идентификатор
    – vantal
    Commented 28 мая 2020 в 10:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.