从动态创建的单个列表创建嵌套列表

Create nested lists from a dynamically created single list

本文关键字：列表 创建 嵌套 单个 动态      更新时间：2023-09-26

我有一系列 LI 元素，类为 .l1 .l2 .l3 等，用于它应该有多少级深度。

我需要做的是，如果 li.l1 下一个

元素是 li.l2 将它们全部包装在一个 ul 中并在 li.l1 中移动它们，但它需要在到达下一个 li.l1 时停止

基本上，我试图根据它们的类名将这个列表格式化为一系列嵌套列表。此外，它需要适用于创建的每个子列表。

所以简单地说，我需要把这个...

<ul>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l3">Text</li>
<li class="l4">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>

成这个...

<ul>
    <li class="l1">Text1</li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2
        <ul>
            <li class="l3">Text3
            <ul>
                <li class="l4">Text4</li>
            </ul>
            </li>
        </ul>
        </li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
</ul>

我知道我可以使用 jQuery wrapAll（） 包装某个类的元素，但不确定当它遇到具有不同类的项目时如何让它停止，然后跳过这些元素并为下一组开始一个新的包装。

我在想一些类似于 li.l1.next（）.siblings（'li.l2'） 的东西，但只是对 jQuery 的了解不足以正确充实它！

到目前为止，我能想到的最好的是这个...... 

$('.sitemap li.l1').each(function(){ 
    $(this).nextUntil('.l1').wrapAll('<ul></ul>'); 
})
$('.sitemap li.l2').each(function(){ 
    $(this).nextUntil('.l2').wrapAll('<ul></ul>'); 
})         
$('.sitemap li.l3').each(function(){ 
    $(this).nextUntil('.l3').wrapAll('<ul></ul>'); 
})                 
$('.sitemap li.l4').each(function(){ 
    $(this).nextUntil('.l4').wrapAll('<ul></ul>'); 
})

但这不会嵌套列表，只是包装元素

干杯，R.

像这样的东西？我采用了稍微不同的方式，不使用.wrapAll().也许你可以调整它，回到你最初的想法。不过，它以这种方式工作。

$("li", "ul.sitemap").each(function () {
    var subElements = $(this).nextUntil("li[class=" + $(this).attr("class") + "]");
    if (subElements.length > 0) {
        var wrapped = $("<ul class='sitemap' />").append(subElements);
        $(this).append($(wrapped));
    }
});

演示：http://jsfiddle.net/sW58K/1/

相关文章：