I'm currently writing very explicit selectors in my jQuery code. For example given this markup

<div class="codeblue">
    <div class="codeyellow">
        <div class="codeorange">
            <div class="codewhite">
                <select id="codeChoice">
                    <option>red</option>
                    <option>green</option>
                    <option>black</option>
                </select>
            </div>
        </div>
    </div>
</div>

I use this explicit selector

var $select = $('.codeblue .codeyellow .codeorange .codewhite #codeChoice');

Would it be better to do this instead?

var $codeBlue = $('.codeblue');
var $select = $codeBlue.find('#codeChoice');

Are there any performance hits for not using explicit selectors?

I'm currently writing very explicit selectors in my jQuery code. For example given this markup

<div class="codeblue">
    <div class="codeyellow">
        <div class="codeorange">
            <div class="codewhite">
                <select id="codeChoice">
                    <option>red</option>
                    <option>green</option>
                    <option>black</option>
                </select>
            </div>
        </div>
    </div>
</div>

I use this explicit selector

var $select = $('.codeblue .codeyellow .codeorange .codewhite #codeChoice');

Would it be better to do this instead?

var $codeBlue = $('.codeblue');
var $select = $codeBlue.find('#codeChoice');

Are there any performance hits for not using explicit selectors?

• javascript
• jquery
• html
• jquery-selectors

• 2 Why are you doing that in the first place? There should only ever be a single element with the id codeChoice. – Brandon Commented Oct 22, 2012 at 17:26
• What you're doing actually makes it slower. – Pointy Commented Oct 22, 2012 at 17:27
• only a side note: in javascript you don't need the dollar sign, You can simply use var selet = ... – Luca Borrione Commented Oct 22, 2012 at 17:29
• Those two snippets are pletely different. – jbabey Commented Oct 22, 2012 at 17:29
• stackoverflow./questions/6028555/… – jbabey Commented Oct 22, 2012 at 17:30

4 Answers 4

Actually, since IDs are unique you can simply select on the ID from the start.

var $select = $('#codeChoice');

As far as your other question goes, there is no easy answer. Multiple selectors can cause slowdowns, but you really have to try to know. Furthermore, it depends on the browser. Your best bet for checking it out is using http://jsperf./

Also, as is noted in this, you should make sure to place the less specific selector on the left, like this:

var $codeBlue = $('.codeblue #codeChoice');

If you use concrete IDs, jQuery will be faster because it uses the native method document.getElementById(); As your first selector includes 4 Classes ( = Slow Detection ) and 1 id (= Faster Detection) and your second selector 1 Class ( = Slow Detection) and 1 Id ( = Faster Detection) , the second will be faster.

Generally selectors will be faster as less pieces are included.

var $select = $("#codeChoice"); 

should be enough, as the id should be unique

The fastest way to select an element in jQuery is by ID. Accessing element by Id is good for performance. As the id is unique on the page.

High performance Javascript book

var $select = $('#codeChoice");