Jquery wrapAll ul li 在段落之后

【问题标题】：Jquery wrapAll ul li after paragraphsJquery wrapAll ul li 在段落之后
【发布时间】：2011-12-31 03:25:30
【问题描述】：

我需要改变这个：

<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>');
});

任何建议将不胜感激 :) 非常感谢！

【问题讨论】：

标签： jquery html-lists paragraphs wrapall

【解决方案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 数学 all <li> 元素（不是每个 <p> 元素的分组），因此将每个项目包装在匹配项中（@ 987654330@ 元素）和<ul> 元素。

【讨论】：

非常感谢，它就像一个魅力 :) 问候法比恩