jQuery Traversing

What You’ll Learn

A jQuery selection is a collection of DOM elements, not a single node. Traversing methods let you grow, shrink, or navigate those collections before you style or manipulate them. Start with .add() to union sets — this hub links to 32 traversing method tutorials (more coming soon).

Introduction

When you write $("li.active"), jQuery stores every matching list item in an internal array-like object. Often you need to include more elements — siblings, headings, footer links — without running a second query and merging results yourself.

What Is jQuery Traversing?

Traversing covers methods that operate on jQuery collections: combining sets with .add(), filtering with .not(), walking the tree with .parent() and .find(), and returning to earlier selections with .end(). These methods answer “which elements am I working with?” — not “how do I change the HTML?”

Key Features

• Non-destructive — Traversing returns new jQuery objects; earlier selections stay on the internal stack.
• Flexible arguments — .add() accepts selectors, DOM nodes, HTML strings, or other jQuery objects.
• Automatic deduplication — The same element never appears twice in one collection.
• Chain-friendly — Combine traversing with manipulation: $("h2").add("p").css("color", "navy").

📝 Syntax

Minimal .add() workflow:

// Start with list items, add every paragraph
const $combined = $("li").add("p");

$combined.addClass("highlight");

Method groups

This hub currently documents .add() in depth. Additional traversing tutorials will appear in the index as they are published.

When to Use Traversing

• Batch styling — Highlight headings and paragraphs together with one .add() chain.
• Form validation — Collect inputs, labels, and error messages into one set before toggling classes.
• Event handlers — Attach one listener to multiple unrelated element groups.
• Avoid duplicate queries — Merge selections instead of looping two separate jQuery objects.
• Progressive tutorials — Learn collection building with .add() before filters and tree walkers.

Examples Gallery

Include jQuery 3.7+ and open DevTools Console (F12) to run each snippet. Assume basic HTML with <li>, <p>, and <h2> elements on the page.

const $items = $("li").add("p");

console.log("Count:", $items.length);
$items.css("outline", "2px solid #7c3aed");

Count: (number of li + p elements on page)
(outline applied to every li and p)

const footer = document.getElementById("footer");
const $withFooter = $("h2").add(footer);

console.log("Includes footer:", $withFooter.is(footer)); // → true

Includes footer: true

const $headings = $("h2, h3");
const $emphasis = $("strong, em");
const $all = $headings.add($emphasis);

$all.addClass("text-accent");

(text-accent class added to every h2, h3, strong, and em)

const $navLinks = $("#nav a");
const $sidebarLinks = $navLinks.add("a", "#sidebar");

console.log("Sidebar links included:", $sidebarLinks.length);

Sidebar links included: (nav a count + sidebar a count)

💡 Best Practices