Selectors & DOM Traversal

Introduction

Selecting elements is jQuery's superpower. The $() function accepts any CSS selector, and once you have a jQuery object you can traverse — move to parents, children, and siblings — using a rich set of methods. This lets you start from one element and reach exactly the related elements you need.

Theory

Selectors

• $('p') — by tag
• $('#main') — by id
• $('.card') — by class
• $('ul > li'), $('input[type="text"]') — combinators & attribute selectors
• jQuery extras: :first, :last, :even, :odd, :contains("text")

Traversal methods

• .find(sel) — descendants matching sel (searches deep).
• .children(sel) — direct children only.
• .parent() — the immediate parent.
• .closest(sel) — nearest ancestor (including self) matching sel.
• .siblings(sel) — all siblings (optionally filtered).
• .eq(n) — the element at index n in the matched set.

Most traversal methods return a new jQuery object, so you can chain: $('#list').children().eq(0).addClass('first').

Real World Example

The list below is live. The buttons run traversal methods and report what was matched (text is set with .text(), never .html()):

$('#fruits').children().length;     // 4
$('#fruits li').eq(1).text();       // "Banana"
$('#fruits .citrus').siblings();    // the non-citrus items
$('#banana').closest('ul').attr('id'); // "fruits"

Common Mistakes

• Confusing .find() with .children(). .find() searches all descendants; .children() only the direct ones.
• Confusing .closest() with .parent(). .parent() goes up exactly one level; .closest() climbs until it finds a match.
• Off-by-one with .eq(). It's zero-indexed — .eq(0) is the first element.
• Assuming a single element. Selectors return collections; a method like .text() reads only the first but sets all.

Best Practices

• Prefer id selectors for unique elements — they're fast and unambiguous.
• Scope searches: $('#list').find('.item') is clearer and faster than a global $('.item').
• Cache repeated selections in a variable prefixed with $.
• Use traversal instead of brittle, deeply-nested selectors that break when markup changes.

Practice Exercise

1. Build a <ul> with five list items.
2. Select the third item with .eq(2) and read its text.
3. From that item, get its .siblings() and log how many there are.
4. From a nested element, use .closest('ul') to jump back to the list.

Assignment

Create a small accordion-style menu structure (no styling needed):

1. Several sections, each a div containing a heading and a hidden content block.
2. When a heading is involved, use .closest() to find its section and .find() to reach the content block.
3. Use .siblings() to reference the other sections.
4. Log the matched elements' text using .text() to confirm your traversal is correct.

Interview Questions

• What is the difference between .find() and .children()? — .find() matches any descendant; .children() matches only direct children.
• What does .closest() do? — Returns the nearest ancestor (or self) matching the selector, climbing up the tree.
• How do you get a specific element from a matched set? — .eq(index) (zero-based).
• What does .siblings() return? — All sibling elements of each matched element, optionally filtered by a selector.
• Do jQuery selectors support CSS syntax? — Yes, plus jQuery-specific pseudo-selectors like :first and :contains().

Additional Resources

• api.jquery.com/category/selectors — the full selector list
• api.jquery.com/category/traversing — all traversal methods
• learn.jquery.com/using-jquery-core/traversing — the official traversal guide