jQuery DOM Traversing
Traversing means “moving around” the DOM from a selected element: up to its parents, down to its children/descendants, or sideways to its siblings. jQuery gives concise methods to do this safely and efficiently.
Quick Reference
| Method | Description | Example |
|---|---|---|
parent() |
Immediate parent of each element in the set. | $('#leaf').parent() |
children([sel]) |
Direct children (optionally filter by selector). | $('#wrap').children('.item') |
find(sel) |
All descendant elements matching sel. | $('#root').find('li.active') |
siblings([sel]) |
All siblings (optionally filtered). | $('.pick').siblings(':not(.disabled)') |
next(), prev() |
Immediate next / previous sibling. | $('.pick').next() |
closest(sel) |
First ancestor (including self) that matches. | $(this).closest('.card') |
parents([sel]) |
All ancestors (optionally filtered). | $('#leaf').parents('.wrapper') |
parentsUntil(sel) |
Ancestors up to (but not including) the match. | $('#leaf').parentsUntil('.top') |
each(fn), map(fn) |
Iterate for side effects / create arrays of results. | $('li').map(fn).get() |
filter(sel), not(sel), has(sel) |
Refine a selection; exclude; keep those containing. | $('li').has('span') |
index() |
0-based position within its siblings (or within a set). | $('.pick').index() |
addBack(), end() |
Reinclude previous set; pop selection stack. | $('#a').find('p').addBack().end() |
└── #wrap
├── .child (A)
├── .child (B)
└── .child (C)
var $wrap = $('#wrap')) and keep chains short for readability and performance.
1) parent() & children()
parent() moves exactly one level up; children() returns only direct children (not grandchildren).
$('#wrap .child:first').parent().css('border', '2px solid red');
$('#wrap').children().css('background', '#e3f2fd');
2) find() (Descendants)
find() searches all nested descendants under the current selection.
$('#root').find('.item').addClass('hit');
3) siblings(), next(), prev()
Move sideways among elements that share the same parent.
$('.pick').siblings().addClass('sib');
$('.pick').next().addClass('sib');
$('.pick').prev().addClass('sib');
4) closest()
Walk up from the element itself to the first ancestor that matches the selector.
$(this).closest('.card').toggleClass('hit');
5) parents() & parentsUntil()
parents() collects all ancestors; parentsUntil(sel) stops before the given match.
$('#leaf').parents().addClass('marked');
$('#leaf').parentsUntil('.A').addClass('marked');
6) Iterate with each() & map()
Use each() for side effects (like summing); map() transforms into an array (use .get() to unwrap).
$('#list li').each(function(){ // side effects });
$('#list li').map(function(){ // return numeric value }).get();
7) Refine Selections: filter(), not(), has()
Keep only matches, exclude some, or keep those containing a selector.
$('#list li').filter('.x');
$('#list li').not('.x');
$('#list li').has('span');
8) index()
Find the position of the element among its siblings (0-based).
$('.pick').index(); // e.g. returns 1
9) Traversal Stack: addBack() & end()
Chains push intermediate selections onto a stack. addBack() re-includes the previous set; end() pops back one step.
$('#wrap').find('p').addBack().toggleClass('hit').end().last();
10) Putting It Together (Traversal Chain)
Realistic chain: find a list item, go up to its card, then highlight the title.
$('#grid .card:first').find('ul li').eq(1)
.closest('.card').find('.title').addClass('hit');
var $card = $(this).closest('.card'); Then reuse $card.