JS each каждый второй элемент списка удалить

16 июня 2021, 15:10

Мне кажется, я не понимаю как работает each. Можете помочь? Может не совсем верный заголовок, но проще говоря. У меня есть списки:

<ul class="ul">
    <li class="li">1111</li>
    <li class="li">Alex</li>
</ul>
<ul class="ul">
    <li class="li">2222</li>
    <li class="li">Boris</li>
</ul>
<ul class="ul">
    <li class="li">3333</li>
    <li class="li">Candy</li>
</ul>
<ul class="ul">
    <li class="li">4444</li>
    <li class="li">Donny</li>
</ul>

Ну и я пытаюсь удалить каждый второй элемент списка, т.е элементы содержащие Alex, Boris, Candy, Donny.

  $('.ul').each(function(){
        $('.ul>li:odd').remove();
    });

Проблема в том, что функция бесконечно проходит, и почему то когда удаляет

<li class="li">Alex</li>

То думает что следующий четный элемент списка, это:

<li class="li">2222</li>

Но на самом деле, это нечетный элемент совсем другого (следующего) селектора.

P.S. Все решилось, через приписку класса каждому четному, а потом удаление по классу. Но неправильное понимание не дает мне покоя.

 $('.ul').each(function(){
        $('.ul>li:odd').addClass('123');
    })
 $('.123').remove();

Answer 1

Вы вызываете в цикле один и тот же код для всех итераций.

$('.ul').each(function() {
  //$('.ul>li:odd').remove();
  $(this).find('li:odd').remove();
});

В Вашем решении цикл вообще не нужен:

$('.ul>li:odd').addClass('123');
$('.123').remove();

Или без цикла и в одну строчку:

$('.ul>li:nth-child(even)').remove();

Answer 2

Цикл не нужен, потому что при выборке по селекторам уже итак внутри происходит перебор элементов коллекции и применение метода к ним. Естественно, что в итоге происходит цикл в цикле и на каждой итерации удаляется нечетный элемент для внешнего цикла. В общем, не надо так делать. Просто:

$('.ul>li:odd').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="ul"> 
    <li class="li">1111</li> 
    <li class="li">Alex</li> 
</ul> 
<ul class="ul"> 
    <li class="li">2222</li> 
    <li class="li">Boris</li> 
</ul> 
<ul class="ul"> 
    <li class="li">3333</li> 
    <li class="li">Candy</li> 
</ul> 
<ul class="ul"> 
    <li class="li">4444</li> 
    <li class="li">Donny</li> 
</ul>