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>