jQuery Traversing Basics

jQuery provides powerful methods for traversing the DOM, allowing developers to navigate through HTML elements and manipulate them effectively. Traversing is essential for selecting related elements based on a starting point in the DOM tree.

Categories of Traversing Methods

Traversing Up the DOM Tree
Move from a child element to its parent or ancestor elements.
Traversing Down the DOM Tree
Move from a parent element to its child or descendant elements.
Traversing Siblings
Navigate between sibling elements (elements with the same parent).

Traversing Up the DOM Tree

.parent()
- Selects the direct parent of the selected element.
Syntax:
```
$(selector).parent();
```
Try It Now
Example:
```
$("#child").parent().css("background", "lightblue");
```
Try It Now
.parents()
- Selects all ancestor elements of the selected element, up to the root.
Syntax:
```
$(selector).parents();
```
Try It Now
Example:
```
$("#child").parents().css("border", "1px solid red");
```
Try It Now
.closest()
- Finds the nearest ancestor (including the element itself) that matches the selector.
Syntax:
```
$(selector).closest(filter);
```
Try It Now
Example:
```
$("#child").closest(".container").css("padding", "20px");
```
Try It Now

Traversing Down the DOM Tree

.children()

Selects all direct children of the selected element.

Syntax:

$(selector).children();
$(selector).children(filter);

Try It Now

Example:

$("#parent").children().css("color", "green");

Try It Now

.find()
- Selects all descendant elements that match the selector.
Syntax:
```
$(selector).find(filter);
```
Try It Now
Example:
```
$("#container").find("p").css("font-weight", "bold");
```
Try It Now

Traversing Siblings

.siblings()
- Selects all siblings of the selected element.
Syntax:
```
$(selector).siblings();
```
Try It Now
Example:
```
$("#item1").siblings().css("color", "gray");
```
Try It Now
.next()
- Selects the next sibling of the selected element.
Syntax:
```
$(selector).next();
```
Try It Now
Example:
```
$("#item1").next().css("color", "blue");
```
Try It Now
.nextAll()
- Selects all subsequent siblings of the selected element.
Syntax:
```
$(selector).nextAll();
```
Try It Now
Example:
```
$("#item1").nextAll().css("font-size", "14px");
```
Try It Now
.prev()
- Selects the previous sibling of the selected element.
Syntax:
```
$(selector).prev();
```
Try It Now
Example:
```
$("#item3").prev().css("color", "red");
```
Try It Now
.prevAll()
- Selects all preceding siblings of the selected element.
Syntax:
```
$(selector).prevAll();
```
Try It Now
Example:
```
$("#item3").prevAll().css("font-style", "italic");
```
Try It Now

.nextUntil() / .prevUntil()

Selects siblings up to, but not including, a specified element.

Syntax:

$(selector).nextUntil(selector);
$(selector).prevUntil(selector);

Try It Now

Example:

$("#item1").nextUntil("#item4").css("background", "lightgray");

Try It Now

Traversing Filtering Methods

.filter()
- Reduces the matched set of elements to those that match the filter.
Syntax:
```
$(selector).filter(filter);
```
Try It Now
Example:
```
$("li").filter(".active").css("font-weight", "bold");
```
Try It Now
.not()
- Removes elements that match the filter.
Syntax:
```
$(selector).not(filter);
```
Try It Now
Example:
```
$("li").not(".disabled").css("color", "green");
```
Try It Now
.eq()
- Selects the element at the specified index.
Syntax:
```
$(selector).eq(index);
```
Try It Now
Example:
```
$("li").eq(2).css("background", "yellow");
```
Try It Now

.first() / .last()

Selects the first or last element in the matched set.

Syntax:

$(selector).first();
$(selector).last();

Try It Now

Example:

$("li").first().css("font-size", "18px");
$("li").last().css("font-size", "12px");

Try It Now

Example Code

<div id="container" class="parent">
    <div class="child" id="child1">Child 1</div>
    <div class="child" id="child2">Child 2</div>
    <div class="child" id="child3">Child 3</div>
</div>

Try It Now

JavaScript:

// Traversing up
$("#child1").parent().css("border", "1px solid blue");

// Traversing down
$("#container").children().css("color", "green");

// Traversing siblings
$("#child1").siblings().css("background", "lightgray");
$("#child2").next().css("font-weight", "bold");
$("#child3").prev().css("font-style", "italic");

Try It Now

Summary

jQuery traversing methods make it easy to navigate through the DOM tree. Understanding these methods enables you to manipulate specific elements effectively, whether you are moving up, down, or between siblings.