jQuery Traversing
What is jQuery Traversing?
jQuery traversing means navigating through HTML elements in the DOM (Document Object Model). It allows you to find, filter, and move between elements efficiently.
The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants), and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing – or moving through – the DOM tree.
Illustration explained:
| Parent & Child | Ancestor & Descendant | Siblings |
|---|---|---|
| <div> is the parent of <ul>. | <div> is an ancestor of everything inside it. | The two <li> elements are siblings because they have the same parent (<ul>). |
| <ul> is the parent of both <li> elements. | <span> and <b> are descendants of <ul> and <div>. | |
| The left <li> is the parent of <span>. | ||
| The right <li> is the parent of <b>. |
Why Use jQuery Traversing?
✅ Find elements easily – Move between parent, child, or sibling elements.
✅ Filter specific elements – Select elements based on conditions.
✅ Improve performance – Avoid unnecessary DOM searches.
jQuery Traversing Methods
| Category | Method | Description |
|---|---|---|
| Ancestors (Up) | parent() | Selects the direct parent of an element. |
| parents() | Selects all parents (grandparent, great-grandparent, etc.). | |
| parentsUntil() | Selects all ancestors up to a specific element. | |
| Descendants (Down) | children() | Selects direct children of an element. |
| find() | Selects all matching descendants (children, grandchildren, etc.). | |
| Siblings (Same Level) | siblings() | Selects all siblings of an element. |
| next() | Selects the next sibling. | |
| prev() | Selects the previous sibling. | |
| Filtering | first() | Selects the first element from a set. |
| last() | Selects the last element from a set. | |
| eq(n) | Selects the element at a specific index (n = index number). | |
| filter() | Selects elements that match a condition. | |
| not() | Selects elements that do not match a condition. |
1. jQuery Traversing Ancestors (Upwards)
1️⃣ Select Direct Parent – parent()
👉 Example: Get the parent of a <span>.
$(“#child”).parent().css(“border”, “2px solid red”);
📌 What happens?
• The parent of #child gets a red border.
2️⃣ Select All Parents – parents()
👉 Example: Get all parents of a <span>.
$(“#child”).parents().css(“border”, “2px solid blue”);
📌 What happens?
• All ancestor elements get a blue border.
3️⃣ Select Specific Parents – parentsUntil()
👉 Example: Select parents until a <div> is reached.
$(“#child”).parentsUntil(“div”).css(“border”, “2px solid green”);
📌 What happens?
• Only the ancestors between #child and <div> get a green border.
2. jQuery Traversing Descendants (Downwards)
1️⃣ Select Direct Children – children()
👉 Example: Select all direct children of a <div>.
$(“#parent”).children().css(“color”, “red”);
📌 What happens?
• All direct child elements inside #parent turn red.
2️⃣ Select All Matching Descendants – find()
👉 Example: Select all <p> elements inside a <div>.
$(“#parent”).find(“p”).css(“font-weight”, “bold”);
📌 What happens?
• All <p> elements inside #parent become bold.
3. jQuery Traversing Siblings (Same Level)
1️⃣ Select All Siblings – siblings()
👉 Example: Select all siblings of an <h2>.
$(“#middle”).siblings().css(“background-color”, “yellow”);
📌 What happens?
• All siblings of #middle get a yellow background.
2️⃣ Select Next and Previous Sibling – next() & prev()
👉 Example: Change the color of the next and previous sibling.
$(“#middle”).next().css(“color”, “blue”);
$(“#middle”).prev().css(“color”, “green”);
📌 What happens?
• The next sibling turns blue.
• The previous sibling turns green.
4. jQuery Filtering Methods
1️⃣ Select the First and Last Element – first() & last()
👉 Example: Select the first and last <li> in a list.
$(“li”).first().css(“color”, “red”);
$(“li”).last().css(“color”, “blue”);
📌 What happens?
• The first <li> turns red.
• The last <li> turns blue.
2️⃣ Select an Element by Index – eq(n)
👉 Example: Select the third <li> (index 2 since counting starts from 0).
$(“li”).eq(2).css(“background-color”, “lightgray”);
📌 What happens?
• The third <li> gets a light gray background.
3️⃣ Filter Elements – filter() & not()
👉 Example: Select only <li> elements containing “Special” and ignore others.
$(“li”).filter(“:contains(‘Special’)”).css(“font-weight”, “bold”);
📌 What happens?
• Only <li> items containing “Special” turn bold.
👉 Example: Select all <li> elements except the one containing “Ignore”.
$(“li”).not(“:contains(‘Ignore’)”).css(“text-decoration”, “underline”);
📌 What happens?
• All <li> items except “Ignore” get underlined.
Conclusion
🎯 jQuery Traversing allows you to navigate the DOM and manipulate elements efficiently.
🎯 Ancestors Methods (parent(), parents(), parentsUntil()) – Move up the DOM tree.
🎯 Descendants Methods (children(), find()) – Move down the DOM tree.
🎯 Siblings Methods (siblings(), next(), prev()) – Select same-level elements.
🎯 Filtering Methods (first(), last(), eq(n), filter(), not()) – Select elements based on conditions.
🎯 Traversing helps in dynamic UI updates, menu navigation, and DOM element selection.
