1

我有一系列 .l1 .l2 .l3 等类的 LI 元素，它应该有多深。

我需要做的是，如果 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。

4

1 回答 1

2

像这样的东西？我采用了一种稍微不同的方式，没有使用.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/

于 2013-10-14T16:31:53.440 回答