What is “context” in jQuery selector?

by

There IS a difference, and it is NOT subtle as others believe.

EDIT: Layman’s example of each:

  • Call all the blue houses in town (context), if Jane is there, tip off her hat.
  • Call all the buildings in town (no context yet). IF it is a blue house (add context) and Jane is there, tip off her hat.

Let’s break down what it selects.

First we have: Context selector http://api.jquery.com/jQuery/#jQuery-selector-context

$('input.current_title', '#storePreferences').prop('disabled', false);

This says: use a selector in context. http://api.jquery.com/jQuery/#jQuery-selector-context

While this form MIGHT work, it should really be:

$('input.current_title', $('#storePreferences')).prop('disabled', false);

OR

var myContext = $('#storePreferences');
$('input.current_title', myContext).prop('disabled', false);

This meets the requirement for a context selector being met: “A DOM Element, Document, or jQuery to use as context”.

This says: using the context, find inside that the selector. An equivalent would be:

$('#storePreferences').find('input.current_title').prop('disabled', false);

Which is what happens internally. Find '#storePreferences' and in that find all the 'input.current_title' matching elements.

Then we have: Descendant Selector

$('#storePreferences input.current_title').prop('disabled', false);

This is a Descendant Selector (“ancestor descendant”) http://api.jquery.com/descendant-selector/ which says: find all the input.current_title elements inside the #storePreferences element. THIS IS WHERE IT GETS TRICKY! – that is EXACTLY what it does –

finds ALL the input.current_title (anywhere), then finds those INSIDE the #storePreferences element.

Thus, we run into jQuerys’ Sizzle right to left selector – so it initially finds MORE(potentially) than it needs which could be a performance hit/issue.

Thus the form of:

$('#storePreferences').find('input.current_title').prop('disabled', false);

would perform better than the Descendant version most likely.

More Related Contents:

  1. How to get the children of the $(this) selector?
  2. Get selected text from a drop-down list (select box) using jQuery
  3. Assign click handlers in for loop
  4. How can I select an element by name with jQuery?
  5. How do I get jQuery to select elements with a . (period) in their ID?
  6. jQuery selectors on custom data attributes using HTML5
  7. How can I get selector from jQuery object
  8. Select all elements that have a specific CSS, using jQuery
  9. jQuery function to get all unique elements from an array?
  10. jQuery DOM changes not appearing in view source
  11. Testing if a checkbox is checked with jQuery
  12. JQuery .on() method with multiple event handlers to one selector
  13. jQuery : select all element with custom attribute [duplicate]
  14. Selecting multiple classes with jQuery
  15. Case insensitive jQuery attribute selector
  16. How do you check if a selector matches something in jQuery? [duplicate]
  17. Not class selector in jQuery
  18. jQuery single selector vs .find()
  19. jQuery Selector + SVG Incompatible?
  20. Using jQuery to search a string of HTML
  21. jQuery find and replace string
  22. Is there a ‘has focus’ in JavaScript (or jQuery)?
  23. jQuery :contains(), but to match an exact string
  24. jQuery support “:invalid” selector
  25. Getting a jQuery selector for an element
  26. Combine two selectors with one jQuery object
  27. How to select empty inputs (value=””) using jQuery
  28. What is the new proper way to use a child selector with a context node in jQuery?
  29. jQuery: Select data attributes that aren’t empty?
  30. Why do functional pseudos such as :not() and :has() allow quoted arguments?

Leave a Comment