How to Select Child Elements from $(this) in jQuery

By the end of this page, you will understand how to select child elements from $(this) in jQuery, when to use .children() vs .find(), and how this pattern is used in click handlers and real projects.

In jQuery, $(this) usually refers to the current DOM element inside an event handler, such as the element that was clicked.

If you want to access elements inside that current element, jQuery gives you traversal methods such as:

• .children() for direct children only
• .find() for any matching descendants inside the element

For the given HTML, the img is a direct child of the div, so either of these works:

$(this).children('img')

or

$(this).find('img')

This matters because real interfaces often react to user actions on a container and then update something inside it, such as:

• changing an image
• toggling a class on a nested element
• reading text inside a clicked card
• finding form fields inside a section

Understanding DOM traversal helps you write code that is scoped to the current element instead of searching the whole page.

Think of $(this) as the current folder you are standing in.

• .children('img') means: look only at the files directly inside this folder
• .find('img') means: search anywhere inside this folder, including subfolders

So if you click one specific div, $(this) is that div, and you can search inside it without affecting other parts of the page.

Core syntax

$(this).children('img')
$(this).find('img')

Example: direct child image

<div class="card">
  <img src="photo.jpg" alt="Photo">
</div>

$('.card').on('click', function () {
  const image = $(this).children('img');
  console.log(image.attr('src'));
});

Explanation

• $('.card').on('click', ...) attaches a click handler to each .card

Consider this example:

<div class="box">
  <img src="a.jpg" alt="A">
</div>

$('.box').on('click', function () {
  const img = $(this).children('img');
  console.log(img.attr('src'));
});

Here is what happens step by step:

1. jQuery selects all elements with class .box.
2. A click handler is attached to each one.
3. When a user clicks a .box, the function runs.
4. Inside the function, this refers to the clicked .box DOM element.
5. $(this) wraps that DOM element as a jQuery object.
6. .children('img') looks at the direct children of that and keeps only elements.

This pattern is very common in jQuery-based interfaces.

Clickable image cards

When a user clicks a card, you may want to:

• highlight the image inside it
• swap the image source
• open a larger preview

Product grids

A product tile may contain an image, title, and price. Clicking one tile should only affect that tile's contents.

$('.product').on('click', function () {
  $(this).find('img').addClass('active');
});

Forms and validation

You might select inputs inside the currently submitted section rather than searching the whole page.

Accordions and panels

When a panel is clicked, developers often search inside it for icons, labels, or nested content to update.

Tables and rows

Clicking a row can trigger updates to buttons, badges, or links inside that specific row.

In real projects, developers rarely use broad selectors when the action should be limited to one component. Instead, they scope the search to $(this) or another known container.

Common pattern: scoped traversal

$('.gallery-item').on('click', function () {
  const $img = $(this).find('img');
  $img.toggleClass('highlighted');
});

This avoids accidentally selecting every image on the page.

Guard clause pattern

Sometimes the child may not exist.

$('.card').on('click', function () {
  const $img = $(this).children('img');

  if ($img.length === 0) {
    return;
  }

  $img.addClass('loaded');
});

Working with data from child elements

1. Using a global selector instead of searching inside this

Broken:

$('img').addClass('active');

This selects all images on the page.

Better:

$(this).children('img').addClass('active');

2. Using .children() when the element is nested deeper

Broken for nested HTML:

$(this).children('img')

If the image is inside another wrapper, this returns nothing.

Better:

$(this).find('img')

3. Forgetting to wrap this in $()

Broken:

// Direct child only
$(this).children('img')

// Any matching descendant
$(this).find('img')

// Alternative scoped search
$('img', this)

// First matching child image
$(this).children('img').first()

// Read an attribute
$(this).children('img').attr('src')

// Add a class
$(this).children('img').addClass('active')

Quick rules

• this inside a normal jQuery event handler is the clicked DOM element
• Wrap it with $() to use jQuery methods
• Use .children() for direct children
• Use .find() for nested descendants
• Avoid arrow functions if you rely on this

How do I get a child img from $(this) in jQuery?

Use:

$(this).children('img')

If the image may be nested deeper, use:

$(this).find('img')

What is the difference between .children() and .find() in jQuery?

.children() only looks at direct children. .find() searches all matching descendants inside the element.

Why does this.children('img') not work?

Because this is a plain DOM element in the event handler. jQuery methods require a jQuery object, so use $(this) first.

Can I use $('img', this) instead?

Yes. It is an alternative scoped selector that searches for img inside .

• jQuery event handling — $(this) is most commonly used inside click and other event callbacks.
• DOM traversal — methods like .children(), .find(), and .closest() help move through the document structure.
• CSS selectors — jQuery selectors use CSS-like syntax such as img, .class, and #id.
• jQuery objects vs DOM elements — understanding the difference explains why $(this) works but this.children() does not.
• Event delegation — useful when handling clicks on elements added dynamically.
• Attributes in jQuery — methods like .attr() are often used after selecting child elements.
• Class manipulation in jQuery — methods like .addClass() and .removeClass() are common after finding nested elements.