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);