Kore
Kore

Reputation: 353

Selecting in jQuery nested .children()

I am learning jQuery, and I was wondering what is the difference between these two selectors:

    $('#puzzleGrid table tr td img');

and

    $('#puzzleGrid').children('table').children('tr').children('td').children('img');

Thank you!

Upvotes: 2

Views: 186

Answers (1)

wirey00
wirey00

Reputation: 33661

This children() selector - as pointed out by Fraicio Matte -

This first one will use the DOM QSA when available, which is a quadrillion times faster than the second example full of function calls' overhead.

$('#puzzleGrid').children('table').children('tr').children('td').children('img');

is very specific to getting children elements of the previous element

and this - descendant selector

$('#puzzleGrid table tr td img')

Will find any "table" descendants(any table element under) of element with id=puzzleGrid.. and any descendant tr of the found tables.. and so on.

The equivalent to the first one would be using > child-selector

$('#puzzleGrid > table > tr > td > img')

Upvotes: 6

Related Questions