Varias ID idénticas en el mismo documento HTML

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?

preguntado el 09 de marzo de 12 a las 14:03

NEVER have the same id in the DOM. -

PS You should never have to add context when selecting on id. Selecting on only an id is really fast. -

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. -

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. -

id is exactly how it sounds, an identification, unique. never have two the same. -

3 Respuestas

El $(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.

respondido 09 mar '12, 14:03

OK - it seems I better move to using classes to be sure. - Bjørn Ove Thue

As long as you use jQuery context, e.g. $('#some-id', context), funcionará bien.

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

respondido 09 mar '12, 14:03

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 :)

respondido 09 mar '12, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.