向前查找兄弟元素，指的是查找某个元素之前的兄弟元素。在jQuery中，对于向前查找兄弟元素，我们有以下3种方法。

  • （1）prev()
  • （2）prevAll()
  • （3）prevUntil()

其中，兄弟元素，指的是该元素在同一个父元素下的同级元素。

一、prev()

在jQuery中，我们可以使用prev()方法来查找某个元素的前一个“相邻”的兄弟元素。

语法：

$().prev()

说明：

大多数情况下，prev()方法是不需要参数的。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(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"元素前面相邻的兄弟元素，即“<li>黄：yellow</li >”这一项。

二、prevAll()

在jQuery中，我们可以使用prevAll()方法来查找某个元素前面“所有”兄弟元素。注意，prev()只会查找前面相邻的兄弟元素，而prevAll()则会查找前面所有的兄弟元素。

语法：

$().prevAll(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的兄弟元素。当参数省略，表示选择前面所有兄弟元素；当参数不省略时，表示选择前面满足条件的兄弟元素。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(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"的元素前面所有的兄弟元素。

三、prevUntil()

在jQuery中，prevUntil()方法是prevAll()方法的一个补充，它可以查找元素前面“指定范围”的所有兄弟元素，相当于在prevAll()方法返回的集合中截取一部分。

语法：

$().prevUntil(selector)

说明：

selector是一个可选参数，它是一个选择器，用来选择符合条件的前面的兄弟元素。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#lvye").prevUntil("#end").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li id="end">红：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("#end")表示以id="lvye"的元素为基点，向前找到id="end"的兄弟元素，然后选取这个范围之间的所有兄弟元素。