How to get the children of the $(this) selector?

When working with event handlers or any context where you have access to $(this), you can retrieve the direct child elements with .children(). Here’s how it typically looks:

$(document).ready(function() {
  $('.parent-class').on('click', function() {
    const directKids = $(this).children();
    console.log(directKids); // Logs the immediate children of .parent-class
  });
});

How It Works

$(this) refers to the current DOM element wrapped in jQuery (e.g., the element that triggered an event).
.children() grabs only the immediate child elements of that parent. It won’t dive into deeper levels of the DOM structure. If you need to target nested descendants at any level, use .find() instead:
```
// This searches all descendant elements matching .some-selector
$(this).find('.some-selector');
```

Filtering Children

You can also pass a selector to .children() to filter specific child elements:

$(this).children('p').css('background-color', 'yellow');
// Applies a style to all <p> elements that are direct children

Keep Your Skills Current

To build a solid grounding in JavaScript, especially if you’re preparing for interviews or leveling up your front-end game, here are two excellent resources:

Grokking JavaScript Fundamentals – Master the building blocks of the language, from DOM manipulation to ES6+ features.
Grokking Data Structures & Algorithms for Coding Interviews – Strengthen your core coding and algorithmic knowledge, a must for landing roles at top tech companies.

For hands-on interview preparation, check out the Coding Mock Interview at DesignGurus.io. You’ll get real-time feedback from ex-FAANG engineers—perfect for sharpening your skills in both JavaScript fundamentals and complex algorithms.

In essence, using .children() on $(this) is a clean and concise way to handle direct descendants. Combine it with jQuery’s other traversal methods (like .parent(), .siblings(), or .find()) for more advanced DOM manipulation.

CONTRIBUTOR

TechGrind