我有一个用于导航的嵌套列表。如何使用Jquery将嵌套列表拆分为多个列表,每个嵌套列表都分开,但仍保持与原始标题在一起的分离列表?
HTML代码:
期望输出:
到目前为止的Javascript代码:
这是一个小提琴(Fiddle)。 http://jsfiddle.net/zEA5t/3/。
HTML代码:
<ul id="bigList">
<li><a href="#">Diary products</a>
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goat</a></li>
<li><a href="#">Cow</a>
<ul>
<li><a href="#">Smelly</a></li>
<li><a href="#">Extra smelly</a></li>
</ul>
<li><a href="#">Soya</a></li>
</li>
</ul>
</li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Pasta</a></li>
</ul>
</li>
</ul>
期望输出:
<ul>
<li><a href="#">Diary Products</a>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Pasta</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goat</a></li>
<li><a href="#">Cow</a></li>
<li><a href="#">Soya</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Cow</a>
<ul>
<li><a href="#">Smelly</a></li>
<li><a href="#">Extra smelly</a></li>
</ul>
</li>
</ul>
到目前为止的Javascript代码:
$(function () {
var $bigList = $('#bigList'),
group;
while ((group = $bigList.find('li:lt(20)').remove()).length) {
$('<ul/>').append(group).appendTo('body');
}
});
这是一个小提琴(Fiddle)。 http://jsfiddle.net/zEA5t/3/。