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>

我尝试在jquery中使用wrapAll，大概是这样的：

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

如有任何建议，我们将不胜感激:)非常感谢！

Answer 1

对于此特定结构，您可以使用以下命令：

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

输出(demo)：

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

至于ID，您可以(demo)：

$('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>元素的分组)进行数学运算，从而使用<ul>元素包装匹配(<li>元素)中的每一项。