jQuery siblings() method

As its name implies, the siblings() method returns all siblings of the selected element. It is an inbuilt method in jQuery. Siblings are those elements that share a common parent.

Suppose we have a jQuery object representing the set of elements, so the siblings() method search through the siblings of elements in the DOM tree and construct a new jQuery object that contains the matching elements.

Syntax

This method accepts an optional parameter named filter, defined as follows.

filter: It is a selector expression that is used to narrow down the search for sibling elements. It can have more than one value. The values should be separated by a comma.

Suppose there is a paragraph element with multiple siblings, and we have to find the h2 and span siblings of the paragraph, then it can be written as follows.

The above syntax will only return the h2 and span siblings of the p element.

Example1

In this example, there is a parent div element with multiple children. Here, we are using the siblings() method to find the siblings of span element. The span element and its siblings share the common parent div element.

Here, we are not using the optional parameter of the siblings() method. We have to click the given button to get the siblings of span element.

<html>

<head>
<style>
div{
border: 2px solid black;
}
.d1 *{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("span").siblings().css({ "color": "red", "border": "2px dashed blue"});
});
});
</script>
</head>

<body>
<h4> This is an example of using the jQuery's siblings() method. </h4>
<div class = "d1">
This is parent div element
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<span> This is span </span>
<h4> This is heading h4 </h4>
<h2>This is heading h2 </h2>
</div>
<p> Click the following button to get the siblings. </p>
<button> Click me </button>
</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the optional parameter of the siblings() method. Here, we are specifying more than one value of the filter parameter.

This parameter narrows down the search and finds the h2 and p siblings of the span element.

<html>

<head>
<style>
div{
border: 2px solid black;
}
.d1 *{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("span").siblings("h2, p").css({ "color": "red", "border": "2px dashed blue"});
});
});
</script>
</head>

<body>
<h4> This is an example of using the jQuery's siblings() method. </h4>
<div class = "d1">
This is parent div element
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<span> This is span </span>
<h4> This is heading h4 </h4>
<h2>This is heading h2 </h2>
</div>
<p> Click the following button to get the siblings. </p>
<button> Click me </button>
</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -