Traversing-Tree Traversal

Posted on Edited on In Views: Disqus:

 

用於巡覽上下前後元素的方法有

.children()、.siblings()、.closest()、.find()、

.offsetParent()、.parent()、.parents()、.parentsUntil()、

.prev()、.prevAll()、.prevUntil()、

.next()、.nextAll()、.nextUntil()

 

一、.children()

.children( [ Selector selector ] )

選取底下一層的子元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

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

    <script>
        console.log($("ul.level-2").children());       
    </script>
</body>

</html>

結果為

 

二、.siblings()

找出同層的所有兄弟元素(不包含自已)。

.siblings( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.fifth-item").siblings());       
    </script>
</body>

</html>

結果為

 

三、.closest()

從自身(也包含自己)往上找尋指定條件最接近的父元素或祖先元素。

有四種多載方法

.closest( Selector selector )

.closest( jQuery selection )

.closest( Element element )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

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

    <script>
        console.log($(".item-a").closest(".item-ii"));       
    </script>
</body>

</html>

結果為

 

四、.find()

根據 selector 所找出的結果，再利用 .find(selector) 繼續二次向下找尋。

.find( Selector selector )

.find( Element element ) Type: Element or jQuery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

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

</html>

 

$("ul.level-2").find(".level-3");

結果為

 

可以跟 .filter() 方法比較

 

五、.offsetParent()

請參考Offset的第二項。

 

六、.parent()

根據原本的集合往上找尋父元素。

.parent( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul class="level-1">
        <li class="item-i">I</li>
        <li class="item-ii">
            II
            <ul class="level-2">
                <li class="item-a">A</li>
                <li class="item-b">
                    B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <li class="item-c">C</li>
            </ul>
        </li>
        <li class="item-iii">III</li>
    </ul>
    <script>
        console.log($(".level-3").parent());
    </script>
</body>

</html>

結果為

 

七、.parents()

根據原本的集合往上找尋所有n層父元素。

.parents( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

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

    <script>
        console.log($("li.item-a").parents());       
    </script>
</body>

</html>

結果為

 

八、.parentsUntil()

根據原本的集合往上找尋所有n層父元素，直到指定截止條件為止。

多載方法為

.parentsUntil( [ Selector selector ] [, Selector filter ] )

.parentsUntil( [ Element element ] [, Selector filter ] ) Element Type: Element or jQuery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

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

    <script>
        console.log($("li.item-a").parentsUntil(".level-1"));       
    </script>
</body>

</html>

結果為

注意，selector參數為截止條件，filter參數為根據selector參數產生出來的集合，

再由filter參數取出需要的元素。

 

九、.prev()

根據原本的集合，往前找尋前一位兄弟元素。

.prev( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.third-item").prev());       
    </script>
</body>

</html>

結果為

 

十、.prevAll()

根據原本的集合，往前找尋所有兄弟元素。

.prevAll( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.third-item").prevAll());       
    </script>
</body>

</html>

結果為

 

十一、.prevUntil()

根據原本的集合，往前找尋所有兄弟元素，直到截止條件為止。

.prevUntil( [ Selector selector ] [, Selector filter ] )

.prevUntil( [ Element element ] [, Selector filter ] ) Element Type: Element or jQuery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.fifth-item").prevUntil(".third-item"));       
    </script>
</body>

</html>

結果為

注意，selector參數為截止條件，filter參數為根據selector參數產生出來的集合，

再由filter參數取出需要的元素。

 

十二、.next()

根據原本的集合，取得下一個元素。

.next( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.third-item").next());       
    </script>
</body>

</html>

結果為

 

十三、.nextAll()

根據原本的集合，取得以後的元素(不包含本身)。

.nextAll( [ Selector selector ] )

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul>
        <li class="first-item">list item 1</li>
        <li class="second-item">list item 2</li>
        <li class="third-item">list item 3</li>
        <li class="fourth-item">list item 4</li>
        <li class="fifth-item">list item 5</li>
    </ul>

    <script>
        console.log($("li.third-item").nextAll());       
    </script>
</body>

</html>

結果為

 

十四、.nextUntil()

根據原本的集合，(不包含本身)往後一直取到指定的截止元素為止。

.nextUntil( [ Selector selector ] [, Selector filter ] )

.nextUntil( [ element element ] [, Selector filter ] ) element Type: Element or jQuery

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>nextUntil demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <dl>
        <dt id="term-1">term 1</dt>
        <dd>definition 1-a</dd>
        <dd>definition 1-b</dd>
        <dd>definition 1-c</dd>
        <dd>definition 1-d</dd>

        <dt id="term-2">term 2</dt>
        <dd>definition 2-a</dd>
        <dd>definition 2-b</dd>
        <dd>definition 2-c</dd>

        <dt id="term-3">term 3</dt>
        <dd>definition 3-a</dd>
        <dd>definition 3-b</dd>
    </dl>

    <script>
        $("#term-2")
          .nextUntil("dt")
            .css("background-color", "red");

        var term3 = document.getElementById("term-3");
        $("#term-1")
          .nextUntil(term3, "dd")
            .css("color", "green");
    </script>

</body>
</html>

注意，selector參數為截止條件，filter參數為根據selector參數產生出來的集合，

再由filter參數取出需要的元素。

執行畫面為