Why jquery selector ("id, id") selects all elements with duplicate identifiers

Question

I came across a year code written by a good developer (yes, I knew it personally) to get access to all elements that have the same identifier.

$("#choice,#choice") 

It returns all elements with an identifier. But if we use below

 $("#choice") 

It returns only the first match, as expected.

After searching for some time, I cannot find any official links pointing to his technique regarding how he selected all the elements with a duplicate identifier.

Can someone explain how this works?

UPDATE

Please see the question is not about which alternative to use. I know the Selectors and attributeSelectors class and I know that duplicating IDs is not recommended, but sometimes you just need to live with the summer code as it is (if you know what I mean).

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

Answer 1

If you look at the sizzle.js code that jQuery uses to select elements based on a selector, you will understand why this is happening. It uses the following regular expression to match a simple identifier, TAG, or class selector:

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

but since this selector is $("#ID,#ID") , it does not match the selector and uses querySelectorAll (line number 270 in the ref link), which replaces the selector with "[id='" + nid + "'] " (line No. 297 in ref), which selects all elements with the corresponding identifier.

However, I agree with other people in this thread that it’s nice to have the same identifier for multiple elements.

Answer 2

The presence of two elements with the same identifier is invalid html in accordance with the W3C specification.

When your CSS selector has only an ID selector (and is not used in a specific context), jQuery uses its own document.getElementById method, which returns only the first element with this identifier.

However, in two other cases, jQuery relies on the Sizzle selector (or querySelectorAll, if available), which seems to select both. Results may vary for each browser.

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

If you absolutely must choose a duplicate ID, use the attribute selector:

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

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

Note. If possible, you should qualify this selector with a tag selector, for example:

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

Answer 3

So, in JS Fiddle, I showed an example of what jQuery does.

https://jsfiddle.net/akp3a7La/

if you have

 $('#choice,#choice'); 

It actually gets all instances of #choice objects twice, and then filters out any duplicates.

in my example I will show you how this happens when you have something like this

 $("#choice,li"); 

Where

elements are actually your #choice elements.

In the jQuery documentation https://api.jquery.com/multiple-selector/

he talks about several selectors, what I think is going on here, your development friend selects the same identifier twice, and he will return it twice. since you can only have one input with one ID per page (good html syntax)

Answer 4

Duplicating the id on the page makes your html invalid. Identifier A unique identifier for one element on the page ( spec ). Using classes that classify similar elements that your case and $('.choice') return a set of elements