Html duplicated ID

邮差的信 提交于 2019-12-17 09:59:17

问题


My control is built dynamically accordingly to user input, there are n textboxes whose IDs are dynamic too.

However, I did not foresee that this HTML would be reused elsewhere within the same html page.

The problem I'm facing now are the duplicated IDs, which are causing my jQuery functions to not work well.

I do understand that IDs should be unique, however, can I avoid the issue by using the outermost <div> with different IDs?

Any experts out there can give me some good advice?

P.S. I'm looking for an effective solution, because if I need to change the ID for each element, it would 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'm wondering if, in the jQuery functions, I can do something like.. #container1 > #textbox1 in the selection?


回答1:


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

You should restructure your jQuery, however much that may stink. The best option would be to use a class, perhaps using the specific id of the parent to specify which one you want

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

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




回答2:


I do understand that "Id" should be unique, however, with the outest with different "id", can it help in solving the problem?

No. Having non-unique element ids will not work. Not consistently, in any case (different browsers and frameworks may handle this case differently).

Any experts out there can give me some good advises?

Prefer using class over using id, particularly for any component which may be reused multiple times on a page.

Set ids against the containing elements themselves instead of the internal component elements, and revise your jQuery selectors accordingly. Or alternately implement your component such that it takes a 'namespace' parameter/attribute when used, and prefix each classname with the namespace inside of your component (this approach works particularly well when creating custom JSP tags).




回答3:


Even though is is wrong there is nothing wrong with the selector in jQuery

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

Demo: Fiddle


A better choice will be use attribute selector

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

Demo: Fiddle




回答4:


I would suggest you to use class instead of id. Duplicate id's are not a good practice.




回答5:


I will suggest use class instead of id. Or add some postfix while generating dynamic ids.




回答6:


You can't have the same id multiple times. Use class instead.




回答7:


Depends on HTML version:

  1. HTML 4 ID must be document-wide unique.
  2. HTML 5 ID unique in there container tree.

but we suggest are not good practice




回答8:


COMPONENTS: if you write reusable component e.g. ) in your example then if you put two ore more components into one document then you will get INVALID html. So instead id use class.



来源:https://stackoverflow.com/questions/22059438/html-duplicated-id

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!