Question

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

Answer 1

这样的东西？我的方式略有不同，没有使用.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/

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

1 个答案: