jquery - fastest selector knowing the first 2 parents

Question

I have the following setup:

 var el = $("#overParent");
 // Do whatever with el here.
 var cls = $(".valueElement", "#parent"); // Get elements with class valueElement inside element with id parent
 // Do whatever

This is working but I was wondering if I can make this faster. I know that #parent is an element inside the #overParent which is already selected. Can I somehow use this to scan only the el #overparent for #parent then get the elements with the specified class?

Something like: $(".valueElement", "#parent", el) but according to documentation $ takes only 2 parameters.

Answer 1

If you are finding an element by ID then using just:

var $element = $('#id');

without providing any context to search will always be the fastest way.

Similarly here where you are providing an ID as a context for your search then "#parent" is the fastest selector. You could theoretically use "#overParent > #parent" to achieve what you mean but it would actually mean more work to do and would be slower.

Answer 2

Selectors like '#theId' don't make jQuery scan the document, as it uses document.getElementById .

If you want to look for an element knowing its id, even if you know its parent, always use $('#theid') .

In fact, if you provide the parent as context, jQuery will call document.getElementById and check after that that the parent contains the found element. This is thus much slower.

From the source code :

    // Speed-up: Sizzle("#ID")
    if ( (m = match[1]) ) {
        if ( nodeType === 9 ) {
            elem = context.getElementById( m );
            // Check parentNode to catch when Blackberry 4.6 returns
            // nodes that are no longer in the document #6963
            if ( elem && elem.parentNode ) {
                // Handle the case where IE, Opera, and Webkit return items
                // by name instead of ID
                if ( elem.id === m ) {
                    results.push( elem );
                    return results;
                }
            } else {
                return results;
            }
        } else {
            // Context is not a document
            if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
                contains( context, elem ) && elem.id === m ) {
                results.push( elem );
                return results;
            }
        }

Similarly, if you want to select all elements with a class, don't specify the parent, this doesn't help.

In your case, as you seem to want to use the parent to restrict the set, simply use

$(".valueElement", "#parent");

Answer 3

Just stick with the regular id selector:

$('#element');

It's still the fastest, even if you already have the parent element selected: http://jsperf.com/id-test-123

I'm just guessing here, but I think browsers use a lookup table to find elements by their id attribute.

Answer 4

according to the docs ...

var el = $("#overParent");

this is extremly efficient thn having another selector attached to it....

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

Answer 5

@Blender

If you are using classes and cache the context element it is faster providing the context:

http://jsperf.com/id-test-123/3