Children of $(this) in jQuery: How to Get Them and Not Get Confused

How to get children of $(this) in jQuery? Let's break it down simply

Imagine: you are writing an interactive table on a website. A user clicks on a row, and you need to highlight only its cells, without touching the neighboring ones. Or you are making a dropdown menu — clicking the header should show only its sub-items. In both cases, the question arises: "How do I get the child elements of the element I just clicked on?"

This question is a real hit on Stack Overflow. Thousands of developers, from beginners to pros, are looking for the answer. And it's no surprise: working with $(this) and its children is a fundamental skill you can't do without. Today, we will once and for all figure out how to do this correctly, elegantly, and without bugs.

Why is $(this).children() not a panacea?

The most obvious method is children(). It returns only direct descendants (the first level of nesting). Sounds logical, but often beginners expect magic from it that doesn't exist.

// HTML:\n// <div id="parent">\n//   <span>Direct descendant</span>\n//   <div>\n//     <span>Nested descendant (will not be returned)</span>\n//   </div>\n// </div>\n\n$('#parent').click(function() {\n  // Will return only the first <span> and <div>\n  let directChildren = $(this).children();\n  console.log(directChildren.length); // 2\n});

Important: children() does not look inside nested blocks. If you need all descendants at any depth — use find().

Method #1: The Classic — $(this).children()

When to use: when you only need elements directly inside the current block. For example, you have a <ul> list and you want to iterate over its <li> items.

// Example: click on a product container\n$('.product-card').on('click', function() {\n  // Get all direct child elements of the card\n  let kids = $(this).children();\n  \n  // Iterate and do something\n  kids.each(function(index) {\n    $(this).addClass('highlighted');\n  });\n});

Tip: you can filter by a selector directly in the call:

// Only <div> inside the current element\nlet divsOnly = $(this).children('div');

Method #2: Deep Search — $(this).find()

When to use: when the structure is nested and you need all elements with a specific class or tag, regardless of depth. For example, finding all images inside an article.

// Click on a news block\n$('.news-block').on('click', function() {\n  // Find all <img> inside, even if they are in subheadings\n  let images = $(this).find('img');\n  \n  images.each(function() {\n    // Add a border to each image\n    $(this).css('border', '2px solid red');\n  });\n});

Difference from children(): find() traverses the entire DOM tree inside the element. children() only goes one level deep. Remember the rule: "Children are children. Find is all descendants to the seventh generation."

Method #3: Native JavaScript — Without jQuery

What if you are writing in pure JS or want to reduce dependency on libraries? $(this) has a "native" equivalent — this in the event handler. And it has children too!

// Pure JavaScript\ndocument.querySelectorAll('.item').forEach(item => {\n  item.addEventListener('click', function() {\n    // Get direct children\n    let children = this.children; // HTMLCollection\n    \n    // Convert to array for convenience\n    Array.from(children).forEach(child => {\n      child.style.backgroundColor = 'yellow';\n    });\n    \n    // Or find all descendants by selector\n    let allSpans = this.querySelectorAll('span');\n  });\n});