Best Practices For Writing jQuery Selectors

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?

Why are you doing that in the first place? There should only ever be a single element with the id `codeChoice`. — Brandon, Oct 22 '12 at 17:26
only a side note: in javascript you don't need the dollar sign, You can simply use var selet = ... — Luca Borrione, Oct 22 '12 at 17:29
http://stackoverflow.com/questions/6028555/jquery-selector-optimization — jbabey, Oct 22 '12 at 17:30
@LucaBorrione, the `$` is just a naming convention since it is a jQuery object. — Brandon, Oct 22 '12 at 17:30
Do not focus on optimizing selectors down to the nth degree unless slow selectors are actually impacting your application's responsiveness. In most cases even cutting execution in half won't produce a noticeable difference. — Kevin B, Oct 22 '12 at 17:39

score 13 · Answer 1 · edited May 23 '17 at 12:16

13

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.com/

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');

edited May 23 '17 at 12:16

Community

1
1

answered Oct 22 '12 at 17:26

Johanna Larsson

10,531
6
39
50

Or, if the same script is reused on another page where `#codeChoice` can be inside a different structure: `$('.codeblue #codeChoice')`. – bfavaretto Oct 22 '12 at 17:30
I'm writing code with other developers and the goal is to have tags with unique ids. However, to ensure that no accidental use of the same id occurs, I wrap my code in a div and treat the div as the root, hence the need for $codeBlue.find('#codeChoice'); Is there any performance hit when using this approach? I understand that selecting by id would be idea, but I can't take that chance just in case someone else uses the same id. If i were the only person on this project, I would simply use the id selector. – Halcyon Oct 22 '12 at 17:33
@bfavaretto At that point it would be invalid HTML, does jQuery optimize when it sees `$("tagname #idval")`, skipping ahead to `document.getElementById()`? Edit: it does not optimize, so it is a safe alternative. – Kevin B Oct 22 '12 at 17:33
@Halcyon as I wrote in my answer, the only way to know for sure is testing it. IIRC older versions of IE suffer from some slowdowns on class selectors. You should not notice a huge slowdown though – Johanna Larsson Oct 22 '12 at 17:36
@KevinB I don't think it optimizes for that. I was thinking on a scenario where (a) the same id is used differently in two different pages (once on each page), (b) the same script is shared by both pages, and (c) the script should target that id on just one of those pages. – bfavaretto Oct 22 '12 at 17:48
@bfavaretto Basically what i was getting at is If jquery DID optimize, it would be selecting the same element (the first one) regardless of what context you gave it. But since jQuery doesn't optimize that, it isn't an issue. – Kevin B Oct 22 '12 at 17:50

score 2 · Accepted Answer · answered Oct 22 '12 at 17:27

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.

score 0 · Answer 3 · answered Oct 22 '12 at 17:26

0

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

should be enough, as the id should be unique

answered Oct 22 '12 at 17:26

st3inn

1,556
9
17

with jQuery `$` has meaning - try to not use it as part of variable name – bensiu Oct 22 '12 at 17:49
just copying the poster's variable ;) would never do it myself – st3inn Oct 22 '12 at 18:00

score 0 · Answer 4 · answered Oct 22 '12 at 17:27

0

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");

answered Oct 22 '12 at 17:27

insomiac

5,648
8
45
73

Best Practices For Writing jQuery Selectors

4 Answers4

Linked