jQuery | prev() & prevAll() 示例

jQuery | prev() & prevAll() 示例

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

上一个()

句法：

$(selector).prev()

这里的选择器是被选择的元素，其先前的兄弟元素被返回。
参数：它不接受任何参数。
返回值：它返回所选元素的前一个兄弟元素。

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

  

    
        .pre * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("h3").prev().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    

  

    
        This is parent element !
        This is first paragraph 
        First span box 
        heading 2 !
        heading 3 !
        This is the second paragraph and next sibling to h3 !
    

  

在上面的代码中，“h3”的前一个兄弟元素以绿色突出显示。
输出：

上一页()

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

$(selector).prevAll()

这里的选择器是被选择的元素，其先前的兄弟元素被返回。
参数：它不接受任何参数。
返回值：它返回所选元素的所有先前的同级元素。

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

  

    
        .preAll * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("h3").prevAll().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    

  

    
        This is parent element !
        This is first paragraph 
        first span box 
        heading 2 !
        heading 3 !
        This is the second paragraph and next
              sibling to h3 !
    

  

在上面的代码中，“h3”之前的所有兄弟元素都以绿色突出显示。
输出：