拆除嵌套的无序列表

时间:2019-07-30 15:47:14

标签: jquery

我有一个嵌套的无序列表

<div id="nav">
  <ul id="root">
  <li>item-a</li>
  <li>item-b
    <ul>
      <li>subitem-b1</li>
      <li>subitem-b2</li>
    </ul>
  </li>
  <li>item-c</li>
  </ul>
</div>

我想要的结果是两个单独的列表。不要介意这些列表之间的引用。

这是我已经拥有的jquery:

var list = $('#root');

function traverseList(list){
    if(list.length > 0){
    list.children('li').each(function(i){
        if($(this).children('ul').length > 0){
        traverseList($(this).children('ul'));
        }else{       
          $('#nav').append($(this).parent());
      }
    });
  }
}

traverseList(list);

所以我有一个递归函数'traverseList'来遍历所有'li'元素以寻找子'ul'。

如果没有,我将父代'ul'附加到框架'div'上。 这只是迈向解决方案的第一步,我想知道它是否有效。

结果

<div id="nav">
  <ul>
    <li>subitem-b1</li>
    <li>subitem-b2</li>
  </ul>
  <ul id="root">
    <li>item-a</li>
    <li>item-b</li>
    <li>item-c</li>
  </ul>
</div>

问题

  1. 我的原始清单在哪里?
  2. 第一个“ li”没有“ ul”,因此应该使用父/根“ ul”-包括子“ ul”?

所以我不明白结果。

Edit in JSFiddle

所以也许有人可以给我深思。谢谢。

0 个答案:

没有答案