Traversing-Miscellaneous Traversing

Posted on Edited on In Views: Disqus:

 

一、.add()

可讓開發者額外再加上要處理的元素。

有五種多載方法

.add( Selector selector )

.add( Element elements )

.add( htmlString html )

.add( jQuery selection )

.add( Selector selector, Element context )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
    <p>a paragraph</p>

    <script>
        $("li").add("p").css("background-color", "red");
    </script>
</body>
</html>

結果為

 

二、.addBack()

.addBack( [Selector selector ] )

將先前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.0.0.js"></script>
</head>
<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li class="third-item">list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    <script>
        $("li.third-item").nextAll()
            .addBack().css("background-color", "red");
    </script>
</body>
</html>

上例意思為將

$("li.third-item").css("background-color", "red");

的效果與

$("li.third-item").nextAll().css("background-color", "red");

的效果一起呈現。

 

注意，.addBack()跟.add()的特性不一樣，

.addBack()其集合是會累加然後再呈現的。

.add()其集合是各自獨立呈現的。

 

三、.andSelf()

has been deprecated

 

四、.contents()

用來取得子元素的節點與內文。

他與.text()方法的差別是.text()是回傳string，而.contents()方法是回傳jQuery object。

 

五、.end()

用來將呈現做一個結尾，讓下一個呈現可以繼承之前的selector做下一個呈現，而不被干擾。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <ul class="first">
        <li class="foo">list item 1</li>
        <li>list item 2</li>
        <li class="bar">list item 3</li>
    </ul>
    <ul class="second">
        <li class="foo">list item 1</li>
        <li>list item 2</li>
        <li class="bar">list item 3</li>
    </ul>

    <script>
        $("ul.first")
          .find(".foo")
            .css("background-color", "red")
          .end()
          .find(".bar")
            .css("background-color", "green");
    </script>
</body>
</html>

 

六、.not()

請參考Traversing-Filtering的第八項。