jquery - Multiple identical IDs in the same HTML document

Question

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?

Answer 1

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.