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
• this is the clicked .card element
• $(this) turns it into a jQuery object
• .children('img') selects the direct img child

Example: nested image

If the image is deeper inside the div, use .find().

<div class="card">
  <div class="content">
    <img src="nested.jpg" alt="Nested photo">
  </div>
</div>

$('.card').on('click', function () {
  const image = $(this).find('img');
  image.addClass('selected');
});

Why .find() here?

Because the img is not a direct child of .card. It is inside another div.

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 .box and keeps only img elements.
7. The matching img is stored in img.
8. img.attr('src') reads the image source.
9. console.log(...) prints the source, such as a.jpg.

If there were multiple .box elements on the page, this code would only inspect the image inside the one that was clicked.

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

$('.item').on('click', function () {
  const altText = $(this).find('img').attr('alt');
  console.log(altText);
});

Event delegation

In larger apps, click handlers are often attached through delegation.

$(document).on('click', '.card', function () {
  $(this).find('img').fadeOut();
});

This is useful when elements are added dynamically after page load.

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:

this.children('img')

this is a DOM element, not a jQuery object, so jQuery methods like .children() are not available directly.

Better:

$(this).children('img')

4. Using an arrow function in jQuery event handlers

Broken:

$('.box').on('click', () => {
  console.log($(this).children('img'));
});

In an arrow function, this does not refer to the clicked element.

Better:

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

5. Assuming only one child exists

If multiple images exist, the result is still a jQuery collection.

const $images = $(this).children('img');
console.log($images.length);

If you need the first one only:

const $firstImage = $(this).children('img').first();

.children() vs .find()

• Use .children() for direct children only
• Use .find() for deeper searches
• .children() is more specific
• .find() is more flexible

For the original question, if the HTML is exactly:

<div>
  <img>
</div>

then .children('img') is the most precise choice.

// 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

Most direct answer to the original question

$(this).children('img')

or

$(this).find('img')

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

Why is $(this) not referring to the clicked element in my code?

You may be using an arrow function. In jQuery event handlers, use a normal function if you want this to refer to the current element.

What happens if there are multiple child images?

jQuery returns a collection of matching elements. You can use .first() or loop through them if needed.

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