子元素的遍历

一、$.each方法 （第一个参数做为内容元素）

$("#test1").click(function(){ $('.level-2').children().each(function(i,ele){ $('div').append('<li>jQuery.children方法,子元素的className为:'+ ele.className + '</li>') }) })

$("#test2").click(function() { function sibling(n, elem) { var matched = []; for (; n; n = n.nextSibling) { //若是存在下一个兄弟节点 if (n.nodeType === 1 && n !== elem) { //是元素节点，且不是当前选择器元素 matched.push(n); } } return matched; }

var ul = document.querySelectorAll('.level-2')[0];

//遍历全部元素 $.each(sibling(ul.firstChild), function(i, ele) { $('div').append('<li>模拟children方法,子元素的className为:' + ele.className + '</li>') }) })

代码调试的结果：

》document.querySelectorAll('.level-2')[0].firstChild 》#text

#text的下一个节点就是子节点

HTML代码（树结构）：

<!-- lang: html -->
<button id="test1">jQuery children方法</button>
<!-- lang: html -->
<button id="test2">模拟children方法</button>
<!-- lang: html -->

<!-- lang: html -->
<div></div>
<!-- lang: html -->

<!-- lang: html -->
<ul class="level-1">
<!-- lang: html -->
    <li class="item-i">I</li>
<!-- lang: html -->
    <li class="item-ii">II
<!-- lang: html -->
        <ul class="level-2">
<!-- lang: html -->
            <li class="item-a">A</li>
<!-- lang: html -->
            <li class="item-b">B
<!-- lang: html -->
                <ul class="level-3">
<!-- lang: html -->
                    <li class="item-1">1</li>
<!-- lang: html -->
                    <li class="item-2">2</li>
<!-- lang: html -->
                    <li class="item-3">3</li>
<!-- lang: html -->
                </ul>
<!-- lang: html -->
            </li>
<!-- lang: html -->
            <li class="item-c">C</li>
<!-- lang: html -->
        </ul>
<!-- lang: html -->
    </li>
<!-- lang: html -->
    <li class="item-iii">III</li>
<!-- lang: html -->
</ul>