Jquery递归函数将嵌套的li合并为一个

Question

我试图使用jquery使用递归方法将嵌套的li转换为单个li

html如下

<ul>
   <li>item-1
      <ul>
         <li>item-1.1</li>
      </ul>
   </li>
   <li>item-2
     <ul>
       <li>item-2.1</li>
       <li>item-2.2
          <ul>
             <li>item-2.2.1</li>
             <li>item-2.2.2</li>
          </ul>
       </li>
     </ul>
   </li>
   <li>item-3
      <ul>
         <li>item-3.1</li>
      </ul>
   </li>
   <li>item-4</li>
   <li>item-5</li>
</ul>

最终单李如下

<ul>
   <li>item-1</li>
   <li>item-2</li>
   <li>item-3</li>
   <li>item-4</li>
   <li>item-5</li>
   <li>item-1.1</li>
   <li>item-2.1</li>
   <li>item-2.2</li>
   <li>item-3.1</li>
   <li>item-2.2.1</li>
   <li>item-2.2.2</li>
</ul>

基本上遍历每个级别然后追加到列表的末尾.我有什么想法可以达到这个目的吗？所以它可以处理任何级别的列表项.

提前致谢.

Answer 1

这是一个递归方法,它将为您提供所需的输出:

function recurseFetchListItems($ul)
{
    var $li = $ul.remove().children("li").remove();
    if ($li.length) {
        $li = $li.add(recurseFetchListItems($li.children("ul")));
    }
    return $li;
}

它使用add()来累积不同级别的列表项,同时从文档中删除每个级别.它还使用children()而不是find()来处理每个调用的单个深度级别.

从那里,您只需要从第一个<ul>元素开始,将累积的列表项集添加回文档,并将它们包装在一个新<ul>元素中:

$(document).ready(function() {
    recurseFetchListItems($("ul:first")).appendTo("body").wrapAll("<ul>");
});

你可以在这个小提琴中看到结果.

原始(误入歧途)的答案如下:

你不需要一个递归函数来做到这一点,因为整个DOM元素树可以与一个选择器匹配.例如,$("li")匹配所有列表项,无论其深度如何.

因此,为了实现您想要的,我们只需要匹配所有<li>元素,<ul>从文档中删除它们的父元素,然后<ul>使用wrapAll()将列表项包装到新元素中并添加该元素:

$(document).ready(function() {
    $("li").parent().remove().end().appendTo("body").wrapAll("<ul>");
});

你可以在这个小提琴中看到结果.