How does jQuery work when there are multiple elements with the same ID value?

by

Having 2 elements with the same ID is not valid html according to the W3C specification.

When your CSS selector only has an ID selector (and is not used on a specific context), jQuery uses the native document.getElementById method, which returns only the first element with that ID.

However, in the other two instances, jQuery relies on the Sizzle selector engine (or querySelectorAll, if available), which apparently selects both elements. Results may vary on a per browser basis.

However, you should never have two elements on the same page with the same ID. If you need it for your CSS, use a class instead.

If you absolutely must select by duplicate ID, use an attribute selector:

$('[id="a"]');

Take a look at the fiddle: http://jsfiddle.net/P2j3f/2/

Note: if possible, you should qualify that selector with a tag selector, like this:

$('span[id="a"]');

More Related Contents:

  1. Bootstrap 4 Carousel “Half of previous”
  2. How can I select an element with multiple classes in jQuery?
  3. Get the value in an input text box
  4. Manually Triggering Form Validation using jQuery
  5. How to fallback to local stylesheet (not script) if CDN fails
  6. How to remove “onclick” with JQuery?
  7. JQuery: ‘Uncaught TypeError: Illegal invocation’ at ajax request – several elements
  8. Cross domain ajax request
  9. jQuery click function doesn’t work after ajax call? [duplicate]
  10. How can I add an element after another element?
  11. How do you make an anchor link non-clickable or disabled?
  12. How do I trigger an HTML button when the “Enter” key is pressed in a textbox?
  13. jQuery – Follow the cursor with a DIV
  14. Increase cursor size in HTML body
  15. Make a perfect circle around a div of variable height
  16. Ajax Upload image
  17. Regular expression for extracting tag attributes
  18. How to remove the URL from the printing page?
  19. How do I securely use Google API Keys
  20. Are IFrames (HTML) obsolete? [closed]
  21. focus doesn’t work in IE
  22. Text not centered with justify-content: center
  23. Access event to call preventdefault from custom function originating from onclick attribute of tag
  24. Position sticky on thead
  25. href=”tel:” and mobile numbers
  26. CSS Selector “(A or B) and C”?
  27. How to change one element while hovering over another with CSS
  28. How to set favicon.ico properly on vue.js webpack project?
  29. Iframe inherit from parent
  30. submit disabled fields

Leave a Comment