Question

我试图在jQuery中实现递归逻辑时遇到困难 - 我没有太多练习。我有一个简单的需求，即按类嵌套未排序的列表。我所拥有的是页面上的两个动态列表（它们是由两个CAML查询生成的）。第一个列表将是顶级<li>，第二个列表将嵌套。第一个列表包含<li>个带有数字ID的列表，第二个列表包含<li>个带有与它们必须嵌套的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>

随着时间的推移，父母和孩子的数量将会不确定{{1}}。此外，如果对孩子们使用不同的attr而不是类别更好。最后，我想为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>

jQuery基于Attribute创建嵌套列表

1 个答案: