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

我有一系列的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>

文本1
文本1

文本2
文本2
文本2

文本3

文本4




文本2
文本2
文本2
文本2
文本2


文本1
文本1
文本1

文本2
文本2
文本2
文本2


文本1

文本2
文本2
文本2
文本2
文本2


文本1
文本1
文本1

我知道我可以使用jQuery wrapAll（）包装某个类的元素，但不知道如何在它遇到另一个类的项目时停止，然后跳过这些并为下一个集合开始新的包装

我在想一些类似于li.l1.next（）兄弟姐妹（'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>'); 
})

$（'.sitemap li.l1'）。每个（函数（）{
$（this.nextUntil（'.l1'）.wrapAll（'
'）；
})
$（'.sitemap li.l2'）。每个（函数（）{
$（this.nextUntil（'.l2'）.wrapAll（'
'）；
})         
$（'.sitemap li.l3'）。每个（函数（）{
$（this）.nextUntil（'.l3'）.wrapAll（'
'）；
})                 
$（'.sitemap li.l4'）。每个（函数（）{
$（this）.nextUntil（'.l4'）.wrapAll（'
'）；
})

但这并不是嵌套列表，而是包装元素

---

干杯，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));
    }
});

$（“li”、“ul.sitemap”）。每个（功能）{
var subElements=$（this）.nextUntil（“li[class=”+$（this.attr（“class”）+”]）；
如果（subElements.length>0）{
var wrapped=$（“
”）。追加（子元素）；
$（this.append（$（wrapped））；
}
});

---

演示：

由于这不是一个简单的问题，请发布一些代码来证明您自己至少尝试过这一点。到目前为止，我能想到的最好的方法是$（'.sitemap li.l1'）。每个（function（）{$（this）.nextUntil（'.l1'）.wrapAll（'

'）；}）$（'.sitemap li.l2'）。每个（function（）{$（this）.nextUntil（'.l2'）.wrapAll（'

'）；}）$（'.sitemap li.l3'）。每个（function（）{$（this）.nextUntil（'.l3'）。wrapAll（'.l3'））））；$）。每个（function（）{.l3'）（“

”；}）但这并不是嵌套列表，而是包装元素。似乎您需要递归地执行此操作，直到每个

ul

只包含同一类的

li

元素。非常好的伴侣，这太完美了。感谢您花时间来帮助。不用担心。很高兴提供帮助。