multiple Id selector in different scopes? [closed]

Question

Id element is unique in whole document, it is ok. How about this

$("#Genders", $("#tableFor_SEARCH")).buttonset();

and

$("#Genders", $("#tableFor_CREATE")).buttonset();

firefox seems ok with this, can this usage acceptable for all browsers and any drawbacks?

Note: I attempt this usage because jquery works with id selector and radio & checkbox helpers (espcially label for tag)

Answer 1

Browsers are fine with this but it doesn't change the fact that your document is invalid. Don't rely on such behavior to construct your pages. You never know that they might choose to break it in future versions.

If you're going to have multiple elements with a same "identifier" anyway, why not use a class instead of an ID? The jQuery selectors to use aren't very different:

$(".Genders", "#tableFor_SEARCH").buttonset(); // Or $("#tableFor_SEARCH .Genders")
$(".Genders", "#tableFor_CREATE").buttonset(); // Or $("#tableFor_CREATE .Genders")

Answer 2

You don't have to duplicate ID to handle your case. You can use class selector to select the element with context. Which is much cleaner in many ways. See below,

//will select element with class .Genders inside #tableFor_SEARCH
$(".Genders", "#tableFor_SEARCH").buttonset(); 

//will select element with class .Genders inside #tableFor_CREATE
$(".Genders", "#tableFor_CREATE").buttonset();

Why you should NOT duplicate ID?

The ID attribute should be unique and that is the standard. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 .The purpose of ID attribute is to identify an element uniquely in a page. This purpose is defeated when you duplicate it.

Below is the list of reason why you should not duplicate an ID,

1. It is not a standard. http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
2. It is broken. http://jsfiddle.net/8H2Da/1/ [with or without context, it would just get the first matching element]
3. Accessing an element with duplicate ID using context is slow, well for that fact ID selector is the fastest of any selector. http://jsperf.com/jquery-id-selector-with-context/2
4. You cannot tag second duplicate ID element from the URL. http://fiddle.jshell.net/s27hQ/show/light/#Goto3 [Note the last part #Goto3 of the URL]
5. You cannot create local link <a href="#dupId">Go to That element</a> to navigate to second duplicate ID element. http://jsfiddle.net/s27hQ/

How it works in jQuery?

$('#Genders') simply calls document.getElementById('Genders') and wraps it with a jQuery object.

However when you do $("#Genders", $("#tableFor_SEARCH")), it simply cannot use getElementById, internally jQuery is going to iterate over every element inside #tableFor_SEARCH to find the matching element with ID #Genders.

Why browser doesn't complain?

From HTML stand point, ID attribute is used to tag the element in a page which you can use as navigate to element using a local page link http://jsfiddle.net/s27hQ/ or navigate to that section from the URL http://fiddle.jshell.net/s27hQ/show/light/#Goto3

Browsers are flexible and forgiving with the developers, even a sloppy HTML code will be rendered beautifully in most desktop browsers. Same way, it really doesn't complain about having duplicate ID, but also it really doesn't work either. Item #4 and #5 from the above.

From JavaScript standpoint, ID element can be accessed using document.getElementById a native, coolest, fastest, one of the oldest API to access an element uniquely in a page. Which clearly doesn't provide a way to access second element with a duplicate ID.

So please don't use it.

Make it a better and easily maintainable code for the future developers.

Answer 3

Because the id should be unique across the entire document the best selector would be:

$("#Genders").buttonset();

Answer 4

As you just said the id is unique by document so if you use many components having the same id then you have problem, therefor the best answer would be to use the most specific id like below :

$("#tableFor_SEARCH").buttonset();
$("#tableFor_CREATE").buttonset();

PS: My guess is that "#tableFor_SEARCH" is under (or contained in) "#Genders".

Answer 5

You see:

$("#Genders", $("#tableFor_SEARCH"))

will do something like this:

$("#tableFor_SEARCH").find("#Genders")

So it will not use document.getElementById() for #Gender, but only for #tableFor_SEARCH resp. #tableFor_CREATE

I suggest you use either classes:

$(".Genders", $("#tableFor_SEARCH"))

or different Ids

$("#Genders_SEARCH")
$("#Genders_CREATE")

This way you have unique Ids and have the speed of the native method getElementById

Answer 6

You can use multiple id:s in a selector, that is no problem. You don't even need to specify it as a scope:

$("#tableFor_SEARCH #Genders").buttonset();

Having conflicting id:s in the page will however be a problem. If the same id occurs more than once, some browser might choose to ignore any of them. Even if it works with all current browsers, it's still a violation of the standards and it can stop working with any browser update.

Having two id:s in a selector can still be useful, for example if you are using the same script for several pages, and use the id to specify what functionality is on the page.