Why does the jquery selector ("id,id") selects all elements with duplicate IDs

Question

I came across some year old code written by a good developer (yes, I knew him personally) to access all elements having the same id.

$("#choice,#choice")

It returns all elements having the id. But if we use the below

$("#choice")

It returns only the first match, as expected.

After searching for some time, I'm unable to figure out any official links pointing to his technique, as to how it selected all elements with duplicate id.

Can anyone please explain how is this working ?

UPDATE

Please see the question is not about what alternative to use. I'm aware of classSelectors and attributeSelectors and know having duplicate IDs is not recommended, but sometimes you just have to live with years old code the way it is (if you know what I mean).

http://jsbin.com/zodeyexigo/1/edit?html,js,output

Answer 1

If you look at the code of sizzle.js that jQuery uses for selecting elements based on selector you will understand why this happens. It uses following regex to match simple ID, TAG or class selector:

// Easily-parseable/retrievable ID or TAG or CLASS selectors
rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,

but as the selector in question is $("#ID,#ID") it does not match with the selector and uses querySelectorAll (line no 270 in ref link), which replaces selector to "[id='" + nid + "'] " (line no 297 in ref link) which selects all the elements with matching ID.

However, I agree with the other people in this thread, that it is not good idea to have same ID for multiple elements.

Answer 2

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