Jquery wrapAll ul li после параграфов

Question

Мне нужно преобразовать это:

<div id="truc">
   <p>First</p>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>

  <p>Second</p>
    <li>Item four</li>
    <li>Item five</li>
    <li>Item six</li>
</div>

в это:

<div id="truc">
   <p>First</p>
    <ul id="list1">
       <li>Item one</li>
       <li>Item two</li>
       <li>Item three</li>
    </ul>

   <p>Second</p>
    <ul id="list2">
       <li>Item four</li>
       <li>Item five</li>
       <li>Item six</li>
    </ul>
</div>

Я пытался использовать wrapAll с jquery, что-то вроде этого:

$('#truc p~li').each(function() {
   $(this).wrapAll('<ul>');
});

Любые предложения будут очень признательны:) Большое спасибо!

Answer 1

Для этой конкретной структуры вы можете использовать следующее:

$('p', '#truc').each(function() {
    $(this).nextUntil('p').wrapAll('<ul>');
});

Выход ( демо):

<div id="truc">
   <p>First</p>
   <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
   </ul>
   <p>Second</p>
   <ul>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
   </ul>
</div>

---

Что касается идентификаторов, вы можете ( демо):

$('p', '#truc').each(function(i) {
    $(this).nextUntil('p').wrapAll($('<ul>', {id: 'list' + (1 + i)}));
});

---

Проблема с вашим оригинальным подходом:

$('#truc p~li').each(function() {
   $(this).wrapAll('<ul>');
});

это селектор #truc p~li все математики<li> элементы (не группировки для каждого <p> элемент) и таким образом оборачивает каждый элемент в совпадении (<li> элемент) с <ul> элемент.