Finding Elements

jQuery provides many methods for navigating to an element from another element. This is called DOM traversal.


.find()

Selects any children with this class regardless of how many layers deep they are nested.

$(".parent-element").find(".child-element");


.closest()

Selects any parents with this class regardless of how many layers up they are.

$(".child-element").closest(".parent-element");


.siblings()

Selects all siblings of the given element

$(".element.is-active").siblings();

Selects all siblings that have a class of "blog-card"

$(".blog-card.is-active").siblings(".blog-card");


.parent()

Selects the direct parent of the given element

$(".element").parent();


.children()

Selects the direct children of the given element

$(".element").children();


.next()

Selects the next sibling of the given element

$(".element").next();


.prev()

Selects the previous sibling of the given element

$(".element").prev();


.nextAll()

Selects all siblings after the current element

$(".element").nextAll();


.prevAll()

Selects all siblings before the current element

$(".element").prevAll();


.filter()

Selects only blog-card elements that have a class of is-active

$(".blog-card").filter(".is-active");


.not()

Selects all blog-card elements that do not have a class of is-active

$(".blog-card").not(".is-active");


.has()

Selects only sections that have an h1 inside

$("section").has("h1");


.first()

Selects the first blog-card on the page

$(".blog-card").first();


.last()

Selects the last blog-card on the page

$(".blog-card").last();


.eq()

Selects a blog-card based on its order on the page

// Selects the 1st blog-card
$(".blog-card").eq(0);
// Selects the 2nd blog-card
$(".blog-card").eq(1);
// Selects the 3rd blog-card
$(".blog-card").eq(2);

Last updated