3

I am creating a web page that includes several HTML-templates that may contain IDs. As a result the final page may contain several HTML element with the exact same ID which is not allowed by HTML

Still I seem to be able to solve this problem using jQuery contexts, like: $( "#id54", template4 ), but will this always work in all browsers or will some browsers deny me multiple IDs?

Bjarki Heiðar
  • 3,117
  • 6
  • 27
  • 40
Bjørn Ove Thue
  • 80
  • 1
  • 6
  • 15
    NEVER have the same id in the DOM. – PeeHaa Mar 09 '12 at 14:23
  • PS You should never have to add context when selecting on id. Selecting on only an id is really fast. – PeeHaa Mar 09 '12 at 14:25
  • So what you're saying is that jQuery is returning more elements when you select on multiple identical id's? It shouldnt, and its considered VERY bad practice. Use multiple classes. – Hans Wassink Mar 09 '12 at 14:25
  • 2
    I'm not sure which browser it was, but in an old sample with this error it wasn't working. I think it was an IE8. - Use classes instead for general functionality and styling and unique IDs for exact element selection. – Smamatti Mar 09 '12 at 14:26
  • 1
    `id` is exactly how it sounds, an identification, unique. never have two the same. – Matt K Mar 09 '12 at 14:26
  • @PeeHaa : I agree, but it should be "never use the same ID in the DOM if possible". SOmetimes it's unavoidable, on a recent complex project I had it was the only way to pass across various ID's without using hidden fields, session data or custom attributes. I would reccomend using custom attributes as long as you don't care about your code being validated by W3C – JustAnotherDeveloper Mar 09 '12 at 14:48
  • @RawryLions what's wrong with `data-*` attributes? – PeeHaa Mar 09 '12 at 15:07
  • @PeeHaa @ It was a client restriction unfortunately :( I personally would just go for prefixing ID's or custom attributes anyday – JustAnotherDeveloper Mar 09 '12 at 15:16
  • See also: [Can multiple different HTML elements have the same ID if they're different types?](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types) – hippietrail Sep 27 '12 at 16:37

3 Answers3

10

The $(selector, context) syntax will always only search within the given context, so as long as your ID's are unique within that context, your jQuery should work in all browsers.

As you realize, though, it is ill-advised to use ID's in this manner, in templates.

Since multiple identical ID's are not allowed, there is no specification for how they should be handled. It can never be guaranteed that all browsers will continue to support the code you're writing. That code will behave the way you expect on all major browsers today, though.

Workarounds would be using classes, or logic in your templating engine to ensure unique ID's, e.g. templateID-control-2-myButton.

David Hedlund
  • 128,221
  • 31
  • 203
  • 222
4

As long as you use jQuery context, e.g. $('#some-id', context), it will work fine.

But you should really use class names instead of IDs for elements that occur more than once in a page.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
1

No browser will deny you multiple ID's but it is bad practice. An "ID" tag is a Unique Identifier for an object within the Document Object Model (DOM). If you aim to be using jQuery with these ID's you need to come up with another solution. Note: Your code will still function perfectly fine, and will render in every browser. Just puts a lot more stress on the DOM if your querying it all the time and they all have the same ID! (Plus, not very maintainable)

If you need each template to have the same ID, consider using a class (i.e. .template) or even a custom attribute (i.e <div class="something" mycustomid="1"> then use $(.something).attr('mycustomid') to access it. (Note: W3C HTML Validator doesn't validate this)

if you really insist on using ID, but want to make the code better, try prefixing something unique to the start of the id (Even the index of an iterator if your templates are created that way), then use jQuery to do a regex match.

It's not much of an answer, but I don't have enough information :)

JustAnotherDeveloper
  • 3,167
  • 11
  • 37
  • 68