jQuery - Traversing Siblings

Traversing siblings in jQuery involves navigating through elements that share the same parent element.

1. Basic Usage

jQuery provides methods to traverse siblings elements, allowing you to select and manipulate adjacent elements.

Example:

// Selecting and styling the next sibling element
$("button").click(function() {
    $(this).next().css("color", "red");
});

In this example, when a button is clicked, the next sibling element is selected using the next() method and styled with red color.

2. jQuery Sibling Traversal Methods

Method	Description	Example
`next()`	Selects the immediate next sibling element.	`$("div").next();`
`prev()`	Selects the immediate previous sibling element.	`$("div").prev();`
`nextAll()`	Selects all next sibling elements.	`$("div").nextAll();`
`prevAll()`	Selects all previous sibling elements.	`$("div").prevAll();`
`siblings()`	Selects all sibling elements.	`$("div").siblings();`
`nextUntil()`	Selects all next sibling elements until a specified element.	`$("div").nextUntil(".stop");`
`prevUntil()`	Selects all previous sibling elements until a specified element.	`$("div").prevUntil(".stop");`

3. Selecting Siblings

jQuery offers several methods for selecting sibling elements based on their relationship with a reference element.

next(): Selects the immediate next sibling element.
prev(): Selects the immediate previous sibling element.
nextAll(): Selects all next sibling elements.
prevAll(): Selects all previous sibling elements.
siblings(): Selects all sibling elements.

Examples:

// Selecting the immediate next sibling element and applying a class
$("button").click(function() {
    $(this).next().addClass("highlight");
});

// Selecting the immediate previous sibling element and changing its text
$("button").click(function() {
    $(this).prev().text("Previous Sibling");
});

// Selecting all next siblings and applying a class
$("button").click(function() {
    $(this).nextAll().addClass("highlight");
});

// Selecting all previous siblings and applying a class
$("button").click(function() {
    $(this).prevAll().addClass("highlight");
});

// Selecting all siblings and applying a class
$("button").click(function() {
    $(this).siblings().addClass("highlight");
});

These examples demonstrate various methods for selecting different types of sibling elements and applying CSS classes or modifying their content.

4. Filtering Siblings

jQuery also allows you to filter sibling elements based on specific criteria.

Example:

// Filtering siblings based on a class and styling them
$("button").click(function() {
    $(this).siblings(".special").css("font-weight", "bold");
});

In this example, when a button is clicked, sibling elements with class special are selected using the siblings() method and styled with bold font-weight.

5. Conclusion

Traversing siblings in jQuery provides powerful capabilities for selecting and manipulating elements that share the same parent. By using methods like next(), prev(), nextAll(), prevAll(), and siblings(), developers can efficiently navigate through sibling elements and perform various operations on them.

Archive