Question

I have a general question about jQuery. Lets say I have the following code:

<div id="container">
    <ul>
        <li>1</li>
        <li class="target">2</li>
        <li>3</li>
    </ul>
</div>

What is the best, and fastest?, way to select the target element?

$('div#container ul li.target')

or

$('#container .target')

or

$('li.target')

or is this even faster:

$('.target')

I want to know, what is the best way in achieving this? You can say the more specific the better, but too specific will slow the process down, I guess. Also the class method is “slower”, but that difference isn’t that big anymore, or am I wrong?

Answer 1

For this example $('.target') is the fastest. JQuery has figured out traversal algorithms 😉

Proof: http://jsperf.com/jquery-selector-speed-tests