HTML duplicate identifier

Question

My control is built dynamically in accordance with user input, there are n text fields whose identifiers are also dynamic.

However, I did not foresee that this HTML would be used elsewhere on the same HTML page.

The problem I'm currently facing is duplicate identifiers, due to which my jQuery functions do not work.

I understand that identifiers must be unique, however, can I avoid this problem by using an external <div> with different identifiers?

Any experts can give me good advice?

PS I am looking for an effective solution, because if I need to change the identifier for each element, it will require a lot of work in my jQuery.

Please help. Thanks!

 <div id="Container1"> <div id="Control"> <input type="text" id="TextBox1" /> <input type="text" id="TextBox2" /> </div> </div> <div id="Container2"> <div id="Control"> <input type="text" id="TextBox1" /> <input type="text" id="TextBox2" /> </div> </div> 

I am wondering if in jQuery functions I can do something like .. #container1 > #textbox1 in the selection?

Answer 1

You absolutely must not have duplicate identifiers . It may work *, but it is semantically incorrect and you should not do this

You have to rebuild your jQuery, however hard it may be. A better option would be to use a class, possibly using a specific parent id to indicate which one you want

Another less attractive but viable way would be to add a number or something to the end of the identifier to make it unique, and then use jQuery to detect any elements with a specific part of the identifier

* - As Arun describes jQuery will accept a selector, but it is NOT favorable because it is incorrect

Answer 2

I understand that "Id" must be unique, however, with outest with a different "id", can this help in solving the problem?

Not. Identification of unique elements will not work. Not sequentially, in any case (different browsers and frameworks can handle this case differently).

Any experts can give me some advice?

Prefer to use class using id , especially for any component that can be reused several times on the page.

Set the identifiers for the contained elements instead of the internal elements of the component, and redesign the jQuery selector accordingly. Or alternately implement your component so that it uses the namespace parameter / attribute when used and the prefix of each class name with the namespace inside your component (this approach works especially well when creating custom JSP tags).

Answer 3

I would suggest you use class instead of id . Duplicating id not a good practice.

Answer 4

Even if it is wrong there is nothing wrong with the selector in jQuery

 $('#Container1 #TextBox1').val(1) $('#Container2 #TextBox1').val(2) 

Demo: Fiddle

---

A better choice would be to use an attribute selector

 $('#Container1 input[id="TextBox1"]').val(1) $('#Container2 input[id="TextBox1"]').val(2) 

Demo: Fiddle

Answer 5

I suggest using a class instead of id. Or add some postfix when creating dynamic identifiers.

Answer 6

You cannot have the same id multiple times. Use class instead.

Answer 7

Depends on HTML version:

1. HTML 4 ID must be unique for the entire document.
2. HTML 5 ID is unique in this tree container.

but we offer are not good practice

Answer 8

COMPONENTS: if you write a reusable component in your example, for example), then if you put two or more components in one document, you will receive INCORRECT HTML. So instead of id use class .