jQuery Traversing
Traversing means moving from one element to others around it: up to its parents, down to its children, or sideways to its siblings.
The Family Tree
An HTML page is a tree. In this example:
Example
<div class="card">
<h3>Pedestal Fan</h3>
<p class="price">Rs 9,000</p>
<button>Add to cart</button>
</div>- The
<div>is the parent of the h3, p and button - The h3, p and button are children of the div
- The h3, p and button are siblings of each other
Traversing Methods
| Direction | Method | Finds |
|---|---|---|
| Up | parent() | The direct parent |
| Up | parents() | All ancestors, up to html |
| Up | closest(sel) | The nearest ancestor (or itself) that matches |
| Down | children() | The direct children |
| Down | find(sel) | All matching elements at any level inside |
| Sideways | siblings() | All other elements at the same level |
| Sideways | next() / prev() | The next / previous sibling |
| Sideways | nextAll() / prevAll() | All the following / earlier siblings |
Using closest() and find()
These two are used most in real projects. A button often needs to work only with its own card:
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.card { border: 1px solid #ccc; padding: 10px; margin: 6px; width: 200px; display: inline-block; vertical-align: top; }
.added { background: #e8f1fa; border-color: #0769ad; }
</style>
</head>
<body>
<div class="card">
<h3>Pedestal Fan</h3>
<p class="price">Rs 9,000</p>
<button>Add to cart</button>
</div>
<div class="card">
<h3>Steam Iron</h3>
<p class="price">Rs 4,500</p>
<button>Add to cart</button>
</div>
<p id="msg"></p>
<script>
$(function () {
$(".card button").on("click", function () {
const card = $(this).closest(".card");
const name = card.find("h3").text();
const price = card.find(".price").text();
card.addClass("added");
$(this).text("Added").prop("disabled", true);
$("#msg").text(name + " (" + price + ") added to your cart.");
});
});
</script>
</body>
</html>closest(".card") goes up from the button to its card, and find() goes down inside that card. The same code works for any number of cards.
Siblings, next and prev
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.tab { display: inline-block; padding: 8px 14px; background: #eee; cursor: pointer; }
.tab.active { background: #0769ad; color: white; }
</style>
</head>
<body>
<div>
<span class="tab active">HTML</span>
<span class="tab">CSS</span>
<span class="tab">JavaScript</span>
</div>
<p id="shown">Selected: HTML</p>
<script>
$(function () {
$(".tab").on("click", function () {
$(this).addClass("active").siblings().removeClass("active");
$("#shown").text("Selected: " + $(this).text());
});
});
</script>
</body>
</html>siblings() selects every other tab, so one line makes the clicked tab active and all the others inactive.
Filtering a Selection
| Method | Keeps |
|---|---|
first() / last() | Only the first / last element |
eq(n) | Only the element at index n |
filter(sel) | Only elements that match |
not(sel) | Only elements that do not match |
Example
$("li").first().css("font-weight", "bold");
$("li").eq(2).css("color", "red");
$("li").filter(".urgent").css("background", "#ffe0e0");
$("li").not(".done").addClass("pending");Looping With each()
each() runs a function for every element in the selection. Inside it, $(this) is the current element and the first parameter is its index.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-price="350">Biryani</li>
<li data-price="120">Raita and salad</li>
<li data-price="80">Cold drink</li>
</ul>
<p id="total"></p>
<script>
$(function () {
let total = 0;
$("li").each(function (index) {
const price = Number($(this).attr("data-price"));
total += price;
$(this).prepend((index + 1) + ". ").append(" - Rs " + price);
});
$("#total").text("Total: Rs " + total);
});
</script>
</body>
</html>Total: Rs 550
Traversing methods can be chained, like $(this).closest("tr").find("td").eq(1). Read a chain from left to right, one step at a time.
Exercise
Exercise
A button is inside a div with class "card". Which line selects that card?