如何将一系列li包装成一个div

Question

我有以下html代码：

<ul>
 <li id="a1">content</li>
 <li id="a2">content</li>
 <li id="a3">content</li>
 <li id="a4">content</li>
 <li id="a5">content</li>
 <li id="a6">content</li>
 <li id="a7">content</li>
</ul>

我想使用jquery将这些li标记封装到一个div中，与相同

<ul>
 <div id="list1">
  <li id="a1">content</li>
  <li id="a2">content</li>
  <li id="a3">content</li>
  <li id="a4">content</li>
  <li id="a5">content</li>
 </div>
 <div id="list2">
  <li id="a6">content</li>
  <li id="a7">content</li>
 </div>
</ul>

有什么办法吗？

谢谢！

编辑：很抱歉造成混淆，为了澄清我的问题：我在一个ul中有一系列li标签，我想将其中一些包装成一个div（例如，将a1到a5包装在一个div中，将a6到a7包装在一个子div中）。我确信的是，我想要包装的li标签有连续的数字作为它们的id。

编辑2：我意识到在ul中包含div是无效的。我问这个问题的原因是，我想使用jquery ui选项卡将ul分为两个选项卡，其中一个选项卡中有li a1到a5，另一个选项卡上有a6和a7。我无法修改html代码，所以我想知道如何使用jquery

Answer 1

运行以下代码：

$("ul")
    .prop("id","list1")
    .after("<ul id='list2'/>");
$("#a6")
    .nextAll()
    .andSelf()
    .appendTo("#list2");

它会把你的单个<ul>变成两个类似的<ul>：

<ul id="list1">
  <li id="a1">content</li>
  <li id="a2">content</li>
  <li id="a3">content</li>
  <li id="a4">content</li>
  <li id="a5">content</li>
</ul>
<ul id="list2">
  <li id="a6">content</li>
  <li id="a7">content</li>
</ul>

Answer 2

根据您的评论，您希望将这7个选项卡拆分为两个选项卡，每个选项卡都有子选项卡。您说您正在使用jQuery UI选项卡。

jQuery UI选项卡使用以下布局：

<div id="tabs">
   <!-- These are the tabs -->
   <ul>
     <li><a href="#tab-A">Tab A</a></li>
     <li><a href="#tab-B">Tab B</a></li>
   </ul>
   <!-- This is your tab content -->
   <div id="tab-A">
     This is tab A
   </div>
   <div id="tab-B">
     This is tab B
   </div>
</div>

运行$('#tabs').tabs()会将其转换为两个选项卡式布局。你只需要把HTML转换成这样，它就会工作了。然后在每个选项卡中，只需设置另一个UL/div即可添加内部选项卡。

以下是您可以随心所欲的方法：http://jsfiddle.net/cCjbC/1/

它制作两个外部标签，然后取下你的ul，将其拆分，然后将其添加为内部标签。

Answer 3

我不确定你在这里问的到底是什么，但为什么不添加UL标签并用div包装呢？

<div id="list">
<ul>
<li id="a1">content</li>
<li id="a2">content</li>
<li id="a3">content</li>
<li id="a4">content</li>
<li id="a5">content</li>
</ul>
</div>