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

你可以在this fiddle看到结果。

---

---

原始（被误导的）答案如下：

您实际上并不需要递归函数来执行此操作，因为整个 DOM 元素树可以与单个选择器匹配。例如，$("li") 匹配所有列表项，无论其深度如何。

所以，要实现你想要的，我们只需要匹配所有<li> 元素，从文档中删除它们的父<ul> 元素，然后使用wrapAll() 将列表项包装成一个新的<ul> 元素并添加该元素：

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

你可以在this fiddle看到结果。