DOM traversing with jQuery - Are there performance hits?

Question

I'm currently loading 300 + items onto the page to filter through. The current page and filtering load are terrible.

After looking through the code, I noticed I wasn't originally referencing ID's first. For example:

$('.item > input:checked','#container')

Now, this approach has been used constantly throughout my JS file.

Would the following improve the performance?

$('#container > .drop-content > .item > input:checked')

If not, what are the best ways for improving this?

Thanks all.

Answer 1

There is a considerable difference between $('.block a') and $('.block').find('a') .

There are a lot of jQuery methods for traversing . Using them is much better in terms of performance, than complex selectors.