DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 10.6 查找所有兄弟元素siblings()
10.6 查找所有兄弟元素siblings()
編輯:jQuery基礎知識     

前2節,我們學習了jQuery用於查找兄弟元素的2組方法:

  • (1)向前查找兄弟元素:prev()、prevAll()、prevUntil();
  • (2)向後查找兄弟元素:next()、nextAll()、nextUntil();

除了上面2組方法之外,jQuery還為我們提供另外一種可以不分前後隨意查找的方法:siblings()。

語法:

 
siblings(expression)

說明:

參數expression表示jQuery選擇器表達式字符串,用於過濾匹配元素。當參數省略時,則表示查找所選元素“所有”同級元素(不分前後);當參數不省略時,則查找所選元素前面“符合條件”的兄弟元素。

大家要記住這一點,使用siblings()方法來查找兄弟元素,這是不分前後的,跟之前我們學的那2組方法不一樣。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#lvye").siblings().css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>紅色red</li>
        <li>橙色orange</li>
        <li>黃色yellow</li>
        <li id="lvye">綠色green</li>
        <li>青色cyan</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("#lvye").siblings()表示選擇id為lvye元素的所有兄弟元素,這裡的兄弟元素不分前面和後面。此外還要注意一下,siblings()方法選擇的兄弟元素,不包括元素本身(難道你跟你自己是兄弟關系?)。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#lvye").siblings(".brother").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>紅色red</li>
        <li class="brother">橙色orange</li>
        <li>黃色yellow</li>
        <li id="lvye">綠色green</li>
        <li>青色cyan</li>
        <li class="brother">藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("#lvye").siblings(".brother")表示選擇id為lvye元素的所有符合條件(即class為brother)兄弟元素,這裡的兄弟元素不分前面和後面。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved