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>元素，然后将列表项包装到新的{{1}中}元素使用wrapAll()并添加该元素：

<ul>

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

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

1 个答案: