jQuery prev() 和 prevAll() 示例

prev()是jQuery中的一个内置函数，用于返回所选元素的前一个兄弟姐妹元素。同胞是指在DOM树中具有相同的父元素。文档对象模型（DOM）是一个万维网联盟的标准，定义为访问元素。

prev()

语法:

$(selector).prev()

这里的选择器是被选中的元素，其之前的兄弟姐妹会被返回。

参数：它不接受任何参数。

返回值：它返回所选元素的前一个兄弟姐妹。

jQuery代码显示prev()方法的工作：

代码 #1:

<html>
 
<head>
    <style>
        .pre * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></script>
    <script>
        (document).ready(function() {
            ("h3").prev().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
 
<body class="pre">
    <div>
        This is parent element !
        <p>This is first paragraph </p>
        <span>First span box </span>
        <h2>heading 2 !</h2>
        <h3>heading 3 !</h3>
        <p>This is the second paragraph and next sibling to h3 !</p>
    </div>
</body>
 
</html>

在上面的代码中，”h3 “的前一个同级元素被突出显示为绿色。

输出:

jQuery prev() 和 prevAll() 示例

prevAll()

prevAll()是jQuery内置的一个方法，用于返回所选元素的所有先前的同级元素。

语法:

$(selector).prevAll()

这里的选择器是被选中的元素，其之前的兄弟姐妹会被返回。

参数：它不接受任何参数。

返回值：它返回所选元素的所有先前的同级元素。

jQuery代码显示prevAll()方法的工作：

代码 #2:

<html>
 
<head>
    <style>
        .prevAll * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/
                jquery/3.3.1/jquery.min.js"></script>
    <script>
        (document).ready(function() {
            ("h3").prevAll().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
 
<body class="prevAll">
    <div>
        This is parent element !
        <p>This is first paragraph </p>
        <span>first span box </span>
        <h2>heading 2 !</h2>
        <h3>heading 3 !</h3>
        <p>This is the second paragraph and next
              sibling to h3 !</p>
    </div>
</body>
 
</html>