JQuery siblings()用法及代碼示例

siblings()是一個內置方法jQuery用於查找所選元素的所有兄弟元素。兄弟元素是指在 DOM 樹中具有相同父元素的元素。這DOM(文檔對象模型)是萬維網聯盟標準。這是為了訪問 DOM 樹中的元素而定義的。

用法:

$(selector).siblings(function)

這裏，選擇器是要找到其兄弟元素的選定元素。

參數：它接受一個可選參數“function”，該參數將說明應該從所有兄弟姐妹中選擇哪些兄弟姐妹。

返回值：它返回所選元素的所有同級元素。

顯示 siblings() 函數工作原理的 jQuery 代碼：

示例 1：在下麵的代碼中，沒有參數傳遞給siblings()函數。

html


<!DOCTYPE html>
<html>
<head>
    <style>
        .sib * {
            display: block;
            border: 2px solid lightgray;
            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 () {
            $("h2").siblings().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
<body class="sib">
    <div>
        This is parent!!!
        <p>This is paragraph!!!</p>
        <span>This is span box!!!</span>
        <h2>This is heading 2!</h2>
        <h3>This is heading 3!</h3>
    </div>
</body>
</html>

輸出：在上麵的代碼中，“h2” 的所有同級都被突出顯示。

示例 2：在下麵的代碼中，該函數的可選參數用於過濾對同級的搜索。

html


<!DOCTYPE html>
<html>
<head>
    <style>
        .sib * {
            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 () {
            $("h2").siblings("span").css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
<body class="sib">
    <div>
        This is parent element !
        <p>
            This is the first paragraph !!!
        </p>
        <span>
            first span box !!!
        </span>
        <h2>Heading 2!</h2>
        <span>
            second span box !!!
        </span>
        <h3>Heading 3!</h3>
        <span>
            third span box !!!
        </span>
        <p>
            This is the second paragraph !!!
        </p>
    </div>
</body>
</html>

輸出：在上麵的代碼中，元素名稱為 “span” 的 “h2” 的所有同級元素都被選中。

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery siblings() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。