Question

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?

Answer 1

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.