從動態創建的單個列表中創建嵌套列表

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（）。兄弟姐妹（'li.l2'）的方向發展，但只是不知道jQuery足以將它充實出來！

我EEN能想出到目前爲止，這是最好的...

$('.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/