jQuery創建基於屬性的嵌套列表

Question

當我嘗試在jQuery中實現遞歸邏輯時，我陷入了困境 - 我沒有太多練習。我有一個簡單的需求，那就是按類來嵌套未排序的列表。我擁有的是一個頁面上的兩個動態列表（它們由兩個CAML查詢生成）。第一個列表將是頂級<li>，第二個列表將被嵌套。第一個列表的<li> s帶有數字標識，第二個列表的<li> s帶有與它們必須嵌套在其下的id相匹配的數字類。即：

<ul> 
    <li id="10">Parent Item 1</li> 
    <li id="14">Parent Item 2</li> 
</ul> 
<ul> 
    <li class="10">Child 1</li> 
    <li class="10">Child 2</li> 
    <li class="14">Child X</li> 
</ul> 

會有家長和孩子<li> S的一段時間未定數。此外，如果最好使用不同的attr而不是class，那麼對於孩子來說就沒什麼問題。最終我會爲CSS添加更多的類。任何幫助將不勝感激。

Answer 1

工作示例這裏：http://jsfiddle.net/rkCKT/

假設此標記：

<ul class="parents"> 
    <li id="10">Parent Item 1</li> 
    <li id="14">Parent Item 2</li> 
</ul> 
<ul class="children"> 
    <li class="10">Child 1</li> 
    <li class="10">Child 2</li> 
    <li class="14">Child X</li> 
</ul> 

這會工作：

$(document).ready(function(){ 
    $('ul.children li').each(function(){ 
     probable_parent = $('ul.parents li#' + $(this).attr('class')); 
     if (probable_parent.length) 
     { 
      if (!probable_parent.find('ul').length) probable_parent.append('<ul/>'); 
      $(this).detach().appendTo(probable_parent.find('ul')); 
     } 
    }); 
}); 

---

編輯：

因爲表象原因，您爲.children li添加任何類別時，所有內容都將被打破。

對於這個和其他50萬個原因，如果您的文檔是HTML5，我強烈建議爲父 - 子關係使用適當的屬性。理想情況下，標記看起來像這樣：

<ul class="parents"> 
    <li data-itemid="10">Parent Item 1</li> 
    <li data-itemid="14">Parent Item 2</li> 
</ul> 
<ul class="children"> 
    <li data-itemid="10">Child 1</li> 
    <li data-itemid="10">Child 2</li> 
    <li data-itemid="14">Child X</li> 
</ul>