Question

我正在努力让每个元素和所有孩子都有孩子，并将孩子们添加到列表中。但目前只展示了前两个孩子。

有没有更好的方法呢？

这里是jsfiddle，http://jsfiddle.net/7mNsH/2/

这是我到目前为止所拥有的

$('#main').children().each(function(){
    var classs = $(this).attr('class');
    $('#hell ul').append('<li class="'+classs+'">'+classs+'</li>');
});

<div id="main">
    <div class="inner">
        <div class="innerinner"></div>

    </div>
    <div class="inner2">
        <div class="inner2inner2">
            <div class="inner2inner2inner2"></div>
        </div>
    </div>
</div>

所以目前它正在展示这个

<ul>
<li class="inner">inner</li>
<li class="inner2">inner2</li>
</ul>

但我需要它看起来像这样

<ul>
   <li class="inner">inner
      <ul>
         <li class="innerinner">innerinner</li>
      </ul>
   </li>
   <li class="inner2">inner2
    <ul>
         <li class="innerinner">innerinner
         <ul>
            <li class="inner2inner2inner2">inner2inner2inner2</li>
         </ul>
         </li>
    </ul>
   </li>
</ul>

Answer 1

您似乎在寻找 recursive 解决方案。如果你查看当前的代码，你正在完成的是迭代#main的子项，将它们附加到ul，然后完成。你需要确保为自己的孩子（以及他们所有的孩子！）检查每个孩子，以获得完全递归的孩子名单。

在这里查看工作JSFiddle：http://jsfiddle.net/uK6kG/5/

function listChildren(element, container) {
    //Get the current node's class
    var parentClass = element.attr('class');
    //Go ahead and construct a list element
    var parentContainer = $('<li class="' + parentClass + '">' + parentClass + '</li>');
    //Now iterate over the current node's children (if there are any)
    if (element.children().length > 0) {
        var childList = $('<ul></ul>');
        element.children().each(function () {
            //Recursively call the list children function!
            listChildren($(this), childList);
        });
        //Actually add the children to the current node
        parentContainer.append(childList);
    }
    //Add us to our own container
    container.append(parentContainer);

}
$('#main').children().each(function () {
    listChildren($(this), $('#list-container #top-ul'));
});

如何映射每个元素及其子元素

1 个答案: