Introduction to jQuery siblings()
siblings() is an inbuilt jQuery traversing method which is used to get all the siblings of a selected HTML element and Sibling elements are those elements that have the same parent. JQuery provides a variety of methods for DOM traversal and siblings is one of those jQuery methods that provide this sideways traversal functionality in the DOM tree. There are several other methods too which are used for sideways traversal of the DOM tree:
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
siblings() method traverses sideways, that is, forward and backward along with the siblings of the DOM tree unlike next() and prev(). This method proves to be very useful and convenient to use when it comes to performing similar kinds of tasks on a set of elements.
Syntax:
$(selector).siblings(filter[])
where,
- A selector refers to the selected element.
- filter is an optional parameter which narrows down the search for siblings by filtering out the siblings of the selected element.
Examples to Implement jQuery siblings() Method
Let us take a look at a few examples to understand how siblings() method is used to get the sibling elements of a selected element.
Example #1
Example illustrates the implementation of jQuery siblings() method where no filter parameters are passed to the method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Getting all the siblings of an element in jQuery without using a parameter</title>
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("p")
.siblings()
.addClass("selected");
});
</script>
<style>
.selected {
background:lightseagreen;
font-size: larger;
width: 400px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery Tutorial </h1>
<div>
<p >This is an example for jQuery siblings() method</p>
<p>This method is useful for sideways traversal of the DOM tree.</p>
<h3>Other methods for sideways DOM traversal are: </h3>
<ul>
<li>next()</li>
<li>nextAll()</li>
<li>nextUntil()</li>
<li>prev()</li>
<li>prevAll()</li>
<li>prevUntil()</li>
</ul>
</div>
</body>
</html>
Output:
- In this example, siblings() method returns all the sibling elements of the selected element “p” and then add the CSS style class “selected” to the returned siblings.
- Since the selected element “p” has the “div” like its parent, so it returns all those elements who share the same parent “div” as shown below in the screenshot.
Example #2
Example illustrates the implementation of jQuery siblings() method when a filter parameter is passed to the siblings() method.
4.5 (3,818 ratings)
View Course
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Getting all the siblings of an element in jQuery using a parameter</title>
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("p")
.siblings(".filtered")
.addClass("selected");
});
</script>
<style>
.selected {
background:lightseagreen;
font-size: larger;
width: 400px;
}
</style>
</head>
<body>
<div>
<h1>Welcome to jQuery Tutorial </h1>
<p class = "filtered">This is an example
<p>This method is useful for sideways traversal of the DOM tree.</p>
<h3>Other methods for sideways DOM traversal are: </h3>
<ul>
<li>next()</li>
<li>nextAll()</li>
<li>nextUntil()</li>
<li>prev()</li>
<li>prevAll()</li>
<li>prevUntil()</li>
</ul>
</div>
</body>
</html>
Output:
- In this example, we have passed a filter parameter, “.filtered” to the siblings()
- Using a parameter is completely optional but this helps in narrowing down your search for the sibling elements.
- This example will select and return only those siblings of “p” element which have a CSS style class “.filtered” applied to them.
- siblings() method returns the search results in the form of a jQuery object to which then addClass(“selected) method is applied which changes the formatting of the returned jQuery object as shown below in the screenshot.
Example #3
Let us consider one more example where no filter parameter has been passed to the siblings() method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery siblings() method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("h3.selected")
.siblings()
.css({ color: "Green", border: "2px solid red" });
});
</script>
<style>
.sib * {
display: block;
border: 2px solid black;
color: lightblue;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div style="width:400px;" class="sib">
Parent
<h2>This is the first sibling</h2>
<h2>This is the second sibling</li>
<h3 class="selected">Selected Element</h3>
<h2>This is the third sibling</h2>
<h2>This is the fourth sibling</h2>
</div>
</body>
</html>
Output:
- In this example, siblings() method is applied to the jQuery object including the “h3” element with CSS style class name “selected” and returns a new jQuery object.
- Here, since we have not passed any parameter to the siblings() method, it returns all the siblings of the elements in the jQuery object as shown below in the screenshot.
- For a given jQuery object that represents the DOM tree of elements, siblings() method allows you to search through the siblings of these elements in the DOM tree.
- After finding the matching elements, siblings() method construct and return a new jQuery object out of all those matching sibling elements.
- In the above example, we are trying to find the siblings for the element “h3” with class name “selected”.
- Since we have not provided any filtering parameter to the siblings() method, all of the sibling elements are part of the new jQuery object.
- If there was a filter parameter, only the matching elements would have been returned.
Note: The original element for which we are finding the sibling elements are not included among the siblings.
Conclusion
- jQuery siblings() method is one of the traversing methods provided by jQuery for the sideways traversal of a DOM tree of the HTML elements.
- The basic purpose of this method is to find and return the sibling elements of a selected element.
- Sibling elements refer to those elements that share the same parent.
- You can also narrow down your search for the siblings by passing a filter parameter to the method
Recommended Articles
This is a guide to jQuery siblings. Here we discuss a brief overview of jQuery siblings and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
