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>元素的分组），因此包装每个匹配项（<li>元素）中的项目<ul>元素。

Jquery wrapAll ul li之后的段落

1 个答案: