DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 10.4 向前查找兄弟元素
10.4 向前查找兄弟元素
編輯:jQuery基礎知識     

所謂的“向前查找兄弟元素”,就是找到某個元素之前的兄弟元素。在jQuery中,為我們提供了3種向前查找兄弟元素的方法:

  • (1)prev();
  • (2)prevAll();
  • (3)prevUntil();

兄弟元素,指的是該元素在同一個父元素下的“同級”元素。

一、prev()方法

在jQuery中,我們可以使用prev()方法來查找某個元素的前一個“相鄰”的兄弟元素。

語法:

 
$().prev()

說明:

一般情況下,prev()方法是不需要參數的。

舉例:

在線測試
 
<!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").prev().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").prev()表示選取id為lvye的前一個相鄰的兄弟元素,即內容為“黃色yellow”這個li元素。

二、prevAll()方法

prevAll()方法跟prev()方法相似,都是用來向前查找所選元素的兄弟元素。不過prev()方法只能查找所選元素前一個“相鄰”的兄弟元素,而prevAll()可以查找所選元素前面“所有”同級的兄弟元素。

語法:

 
prevAll(expression)

說明:

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

舉例:

在線測試
 
<!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").prevAll().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").prevAll()表示選擇id為lvye的元素前面的所有兄弟元素。

舉例:

在線測試
 
<!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").prevAll(".before").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li class="before">紅色red</li>
        <li>橙色orange</li>
        <li class="before">黃色yellow</li>
        <li id="lvye">綠色green</li>
        <li>青色cyan</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("#lvye").prevAll(".before")表示選擇id為lvye的元素之前的符合條件(即class為before)的兄弟元素。

三、prevUntil()方法

prevUntil()方法介於prev()方法和prevAll()方法之間。prev()方法僅選擇前面相鄰的一個兄弟元素,prevAll()方法選擇前面所有兄弟元素,而prevUntil()方法能夠選擇前面指定范圍的兄弟元素。

語法:

 
prevUntil(expression)

說明:

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

舉例:

在線測試
 
<!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").prevUntil("#until").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li id="until">紅色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").prevUntil("#until")表示以id為lvye的元素為基點,向前找到id為until的同級兄弟元素,然後選擇“這個范圍之間”的兄弟元素。

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