Javascript 将嵌套列表拆分为单独的列表

我有一个用于导航的嵌套列表。如何使用Jquery将嵌套列表拆分为单独的列表，每个嵌套列表是分开的，但将分开的列表与原始标题保持在一起

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

$（函数（）{
var$bigList=$（“#bigList”），
组；
while（（group=$bigList.find（'li:lt（20）'）.remove（））.length）{
$（“
”）.append（组）.appendTo（'body'）；
}
});

这是一把小提琴

---

这个简单的小代码可以做到：

var myList = $('<ul>');

var $originalList = $('#bigList');

$originalList.find('li:has(li)').each(function(){
    var $this = $(this);

    $this.clone().appendTo(myList).find('>ul >li >ul').remove();
})

$('body').append(myList);

var myList=$（“
”）；
var$originalList=$（“#bigList”）；
$originalList.find（'li:has（li）'）。每个（函数（）{
var$this=$（this）；
$this.clone（）.appendTo（myList）.find（'>ul>li>ul'）.remove（）；
})
$（'body'）.append（myList）；

---

Fiddle:

使用选择器ul>li>ul进行Im，将结果输出到

$(function(){
    $('ul > li > ul').each(function(i){
        var clone = $(this).clone();
        clone.find('ul').remove();

        var clone2 = $(this).parent().clone();
        clone2.children('ul, li').remove();
        clone2.append(clone);

        var clone3 = $(this).parent().parent().clone();
        clone3.children('ul, li').remove();
        clone3.append(clone2);

        clone3.appendTo('#output');
    });
})

---

我忍不住觉得这里有些东西太复杂了。第一个问题：为什么生成的HTML（我假设）像第一个例子？我觉得HTML呈现应该改变，而不是jQuery的二次调整。除非有什么你没有告诉我们：）是的，你是对的html应该改变，但我不能，因为我们的CMS限制。烦人的看起来它工作得很好！但有一个问题-原始列表仍在html中，如何删除它？

$originalList.remove（）

。如果要为新列表提供id:

myList.prop（'id'，'bigList'）