Providing context for JQuery ID selector helps?

Question

For performance, which is faster?

$('#' + strControlId);

or

$('#' + strControlId, $('#' + strContextId));

Answer 1

I think the first one would be faster (it's doing less). Though when I think of using the context parameter, I think of doing things like accessing fields in a parent document from an iframe or something like:

var el = $('#' + strControlId, parent.document);

You could try a few benchmarks if you're really curious.

Answer 2

Since you are using an ID as your query I doubt it is any faster.

A good example would be this.

var inputs = $('input');
$('[class=this][name=that]', inputs).css('color', 'red');

Answer 3

To answer your question, the first one will be faster. You will only be calling getElementById once.

One thing to note is the context parameter expects an HTML node and not a jQuery object. In your case, the second item is still searching in the Document rather than inside

$('#' + strContextId)

Make sure to add [0] onto the end of the jQuery object in order to pass the HTML node.

To test this, you can use the context property to check which context the selector is selecting from. For your examples above you can do this

console.log($('#' + strControlId).context);
console.log($('#' + strControlId, $('#' + strContextId)).context);

And you will find that they both return "Document" context. If you run

    console.log($('#' + strControlId, $('#' + strContextId)[0]).context);

It should return whatever element $('#' + strContextId) is pointing too.