# 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.

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

<div align="left"><figure><img src="https://4208221935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnkRd0l7hxCM4iKa5tj2m%2Fuploads%2FIrEbq5pbJT7Db5nw2ZFe%2Fchildren.png?alt=media&#x26;token=43bc6375-dc2e-42b7-80bf-da1f3cb65ad5" alt="" width="243"><figcaption></figcaption></figure></div>

***

## .closest()

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

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

<div align="left"><figure><img src="https://4208221935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnkRd0l7hxCM4iKa5tj2m%2Fuploads%2FXwCnvJ5viJWMT7Vx79mu%2Fparent.png?alt=media&#x26;token=77f9499a-fd91-4183-9494-20ca3d0f99eb" alt="" width="228"><figcaption></figcaption></figure></div>

***

## .siblings()

#### Selects all siblings of the given element

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

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

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

***

## .parent()

Selects the direct parent of the given element

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

***

## .children()

Selects the direct children of the given element

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

***

## .next()

Selects the next sibling of the given element

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

***

## .prev()

Selects the previous sibling of the given element

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

***

## .nextAll()

Selects all siblings after the current element

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

***

## .prevAll()

Selects all siblings before the current element

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

***

## .filter()

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

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

***

## .not()

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

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

***

## .has()

Selects only sections that have an h1 inside

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

***

## .first()

Selects the first blog-card on the page

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

***

## .last()

Selects the last blog-card on the page

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

***

## .eq()

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

```javascript
// 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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jquery.timothyricks.com/finding-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.