Home » JavaScript » jQuery » jQuery Siblings Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

jQuery Siblings Example

The aim of this example is to go through the .siblings() method of jQuery. Basically, the siblings() method returns all sibling elements of the selected element.

Just for your understanding, sibling elements are elements that share the same parent. This method traverse forward and backwards along siblings of DOM elements.

In a more strict definition, given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements, optionally filtered by a selector. Below, we’ll have a look at some examples of using the method.

1. The Basics

Do make sure to follow along to understand the basics of setting up the document and knowing the basic syntax.

1.1 Document Setup

To begin, create a new HTML document and add the the following basic syntax inside like so:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Siblings Example</title>
</head>
<body>
<!-- HTML SECTION  -->

<!-- JAVASCRIPT SECTION  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

</script>

</body>
</html>

Note that the jQuery library is already linked from an online url, so you don’t have to worry about having a local copy.

1.2 Basic Syntax of the Method

The most basic syntax and the most used one for the method is: $(selector).siblings(filter)

The filter is also a selector which is a string containing a selector expression to match elements against.
Remember that filtering is optional. It specifies a selector expression to narrow down the search for sibling elements.

2. Cases & Examples

Let’s have a look at some of the most popular uses of the siblings method in jQuery.

2.1 Example 1

For this starting example, we’ll consider a set of HTML elements like h2, h3, span, p and a wrapping div which will be considered as a parent of these elements. So basically, the HTML is going to look like this for this case:

<!-- HTML SECTION  -->

<div class="parent">
   <h2>Heading Two</h2>
   <p>Lorem ipsum dolor sit amet.</p>
   <h3>Heading Three</h3>
   <span>Span Element</span>
</div>

That is just random information, now in the JS section, after the document is loaded, let’s select one of the elements of this div and apply the method. After applying the method, let’s change some styling for the siblings of the selected element. As you may already imagine, the method is going to be applied to every other element except the selected one from the same parent.

<!-- JAVASCRIPT SECTION  -->

<script type="text/javascript">
$(document).ready(function(){
    $("h2").siblings().css({
        "color": "#e74c3c",
        "border": "2px solid #e74c3c",
        "margin": "1em",
        "padding": "0.5em"
    });
});
</script>

This would result in style changed elements except the h2 element:

Siblings - Example 1 - Basic Application

Siblings – Example 1

2.2 Example 2

In this second example, we’ll consider adding a filter to the siblings of an element. In HTML, add a new ul and three li elements inside.

<ul>
    <li>Item One</li>
    <li class="filter">Item Two</li>
    <li>Item Three</li>
</ul>

Notice one of the li elements is given a class filter. That is the li which we are going to select as one of the siblings of li. This time, let’s just declare a class in CSS and add some properties inside, so that we can use the addClass method to the sibling filtered.

.modern {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    color: #ecf0f1;
    padding: 0.5em;
    margin: 0.5em;
    width: 15%;
    border-radius: 0.5em;
    background-color: #16a085;
}

What remains is just selecting li element in jQuery (even though there are three of them) and filtering only the sibling with the filter class to add the desired class which will change its styling.

<script type="text/javascript">
$(document).ready(function(){
    $("li").siblings(".filter").addClass("modern");
});
</script>

The result in the browser would look similar to this:

Siblings - Example 2 - Filtering Siblings

Siblings – Example 2 – Filtering Siblings

2.3 Example 3

In this last example, I want to prove to you that you it is possible to use this method in conjunction with other methods applied to the same element. In HTML, add the following elements, a p, h5 and a button element.

<div class="parent">
    <p>Lorem ipsum dolor sit amet</p>
    <h5>I'm a small heading.</h5>
    <button>WCG Rocks</button>
</div>

Next, in the JS section, let’s capture the siblings of the button element when this one is clicked, specifically h5 and add the prev() method to select the previous element of h5, in this case the p element. After all this selection, we’re just changing the text of the para.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(this).siblings("h5").prev().html("I just changed text!");
    });
});
</script>

The result would be:

Siblings - Example 3 - Using Multiple Methods

Siblings – Example 3 – Using Multiple Methods

3. Conclusion

To conclude, the .siblings() method is a powerful way to select the siblings of each element in the set of matched elements, and because it optionally accepts a selector expression of the same type that we can pass to the $() function, the elements will be filtered by testing whether they match it. As you already saw, the method can be combined with a lot of other methods to provide the desired results.

4. Download

Download
You can download the full source code of this example here: jQuery Siblings
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments