Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery .siblings() Method

Posted in jQuery Tutorial
Updated on Oct 13, 2024
By Mari Selvan
👁️ 63 - Views
⏳ 4 mins
💬 1 Comment
jQuery .siblings() Method

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a plethora of methods to simplify DOM traversal and manipulation, and one such method is .siblings(). This method allows you to select elements that are siblings of a specified element. Understanding and mastering the .siblings() method can greatly enhance your ability to navigate and manipulate the DOM structure.

In this comprehensive guide, we'll explore the usage of the jQuery .siblings() method with clear examples to illustrate its functionality.

🧠 Understanding .siblings() Method

The .siblings() method in jQuery selects all sibling elements of the specified element. Sibling elements are those that share the same parent as the specified element.

💡 Syntax

The syntax for the .siblings() method is straightforward:

syntax.js
Copied
Copy To Clipboard
$(selector).siblings(filter)

Parameters:

  • selector: A selector expression to filter the siblings.
  • filter (optional): A string containing a selector expression to narrow down the selection of siblings.

📝 Example

  1. Selecting All Sibling Elements:

    Suppose you have an unordered list (<ul>) with list items (<li>), and you want to select all the sibling list items of a particular list item. You can achieve this using the .siblings() method:

    index.html
    Copied
    Copy To Clipboard
    <ul>
      <li>Item 1</li>
      <li id="selected">Item 2</li>
      <li>Item 3</li>
    </ul>
    example.js
    Copied
    Copy To Clipboard
    $("#selected").siblings().css("color", "red");

    This will set the text color of all sibling list items of the list item with the ID selected to red.

  2. Filtering Sibling Elements:

    You can also use the .siblings() method with a filter to narrow down the selection of sibling elements. For example, let's select only the sibling list items that have a class of highlight:

    index.html
    Copied
    Copy To Clipboard
    <ul>
      <li class="highlight">Item 1</li>
      <li id="selected">Item 2</li>
      <li class="highlight">Item 3</li>
    </ul>
    example.js
    Copied
    Copy To Clipboard
    $("#selected").siblings(".highlight").css("font-weight", "bold");

    This will set the font weight to bold for all sibling list items with the class highlight of the list item with the ID selected.

  3. Chaining with .siblings() Method:

    The .siblings() method can be chained with other jQuery methods for more complex DOM manipulations. For instance, let's hide all sibling elements of a specified element:

    index.html
    Copied
    Copy To Clipboard
    <div id="target">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>
    example.js
    Copied
    Copy To Clipboard
    $("#target").siblings().hide();

    This will hide all sibling paragraphs of the div element with the ID target.

🎉 Conclusion

The jQuery .siblings() method is a valuable tool for selecting and manipulating sibling elements in the DOM. Whether you need to select all sibling elements, filter them based on specific criteria, or chain the method with other jQuery operations, .siblings() provides a convenient solution.

By mastering its usage, you can efficiently navigate and manipulate the DOM structure of your web page.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy