Hiding an element using jQuery; which method should I use and why?

Question

What is the difference between these two methods?

$("div span").hide();

$("div > span").hide();

Any impact on performance?

Answer 1

The first will hide all <span>s found anywhere under the <div>. The second will only hide <span>s that are immediate children of the <div>.

jQuery child-selector

Answer 2

On the performance aspect, it may depend upon the exact HTML, but I found the div > span selector to be about 30% faster in this jsperf test. That may be because it only has to look in the children of each div rather than through the whole DOM.

But, it's probably not enough of a speed difference to matter in most cases.