子元素的遍歷

一、$.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>