javascript - 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>文档中的元素，然后将列表项包装到一个新的 <ul> 中元素使用 wrapAll()并将该元素添加回去:

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

您可以在this fiddle 中看到结果.