Как выбрать и отредактировать нужные элементы в нескольких 'li'?

118

13 декабря 2021, 03:10

У меня есть список , в котором будет неизвестное количество 'li'. В каждой li будут всегда одинаковые элементы,которые должны редактироваться одинаково для каждой li. Структура li:

<li>
<h2> *** </h2>
<p> *** </p>
<p> *** </p>
<p> *** </p>
</li>

Я пытаюсь сделать так :

  $('.page-61 > li').each(function() {
          $('> p:first',$(this)).wrap('<div class="more_info"></div>');
          $('h2, .more_info', $(this) ).wrapAll('<div class="modules_info-top"></div>');
          $(this).children('p').wrapAll('<div class="modules_info-bottom"></div>');
  });

Т.е. в каждом 'li' первый 'p' должен обернуться в 'div', после чего этот 'div' и 'h2' оборачиваются еще в один div, а оставшиеся 2 'p' оборачиваются в третий div. Проблема в том,что в первом 'li' все работает как задумано, а в последующих - нет. Перепробовал разные селекторы, ничего не помогло. Как я понял, при использовании селектора $('> p:first',$(this)) ищется первый 'p' не в текущем 'li' а вообще первый 'p' во всех 'li'. Подскажите, как это можно исправить?

Answer 1

$('.page-61 > li').each(function() {
    $(this).find('p:first-of-type').wrap('<div class="more_info"></div>');
    $(this).find('h2, .more_info').wrapAll('<div class="modules_info-top"></div>');
    $(this).children('p').wrapAll('<div class="modules_info-bottom"></div>');
});