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

Extending your toolkit

Select by class or tag name

When you need to filter child selection by their tagName or .className:

$(this).children('div'); // Only 'div' children, no exceptions.
$(this).children('.vip-kid'); // Kids who got the 'vip-kid' pass


First-to-bat kid

Sometimes, you just need the first-born child, extract them with :first pseud-ocity:

$(this).children("img:first"); // The first 'img' spawn


Point-blank kid selectors

To pick up direct descendants with a particular attribute, use the direct offspring combinator > in your find():

$(this).find('> .Robin'); // Direct descendants called 'Robin'


Sibling selection

Should your jQuery sense tingle for the next sibling, .next() is thy saving grace:

$(this).next('img'); // Meet 'img', the sibling that stepped right up


Practices for the pros

Master the chaining

Make your code concise and readable with deft chaining of jQuery methods and operate your DOM navigation like a pro:

$(this).children().first().addClass('jedi'); // Promote the first child to a Jedi, because why not?


Fine-tuning the selection

Employ .filter() with .children() to refine the selection like a picky recruiter:

$(this).children().filter('.chosen-one'); // Selecting the prophesied 'chosen ones' only.


Deciphering this

Remember, this in the realm of jQuery event handlers is bound to the element that triggered the event, giving you context for adequate DOM operations.

Context matters

Consider using more contextual selectors to prevent accidently calling unexpected elements from elsewhere in the DOM:

$(this).find('img.red-pill'); // Finds 'img' with the 'red-pill' taking you to the reality


Thinking performance

Be aware that .find() may not be the sprinter in a large DOM marathon. Use more specific selectors to unburden your jQuery object agent.