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（例如，在一个div中包装a1到a5，a6到一个div中的a7）。我所知道的是，我想要包装的li标签有连续的数字作为它们的ID。

EDIT2：我意识到在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

我不确定你在这里问的是什么，但是为什么不添加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>

Answer 3

根据您的评论，您希望将这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/

它创建2个外部选项卡，然后获取ul，将其拆分，然后将其添加为内部选项卡。

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

3 个答案: