jQuery Traversing

jQuery traversing, which means "move through", are used to select HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

Ancestor

An ancestor is a parent, grandparent, and so on.

parent() Method: $("p").parent();

parents() Method: $("p").parents();
$("p").parents("ul");

parentsUntil() Method: $("span").parentsUntil("body");

Descendants

A descendant is a child, grandchild, and so on.

children() Method: $("div").children();

You can also search for children. $("div").children("p.1");

Siblings

Siblings are the elements having same parent.

siblings() Method: $("h2").siblings();

$("h2").siblings("p");

next() Method: $("h2").next();

nextAll() Method: $("h2").nextAll();

nextUntil() Method: $("h2").nextUntil("h6");

prev() Method: $("h2").prev();

prevAll() Method: $("h2").prevAll();

prevUntil() Method: $("h2").prevUntil("h6");

Filtering

Match, a certain criteria.

first() Method: $("div p").first();

last() Method: $("div p").last();

eq() method: $("p").eq(1);

filter() Method: $("p").filter(".intro");

not() Method: $("p").not(".intro");