javascript Html 重复 ID
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22059438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html duplicated ID
提问by pekcheng
My control is built dynamically accordingly to user input, there are n
textboxes whose IDs are dynamic too.
我的控件是根据用户输入动态构建的,有些n
文本框的 ID 也是动态的。
However, I did not foresee that this HTML would be reused elsewhere within the same html page.
但是,我没有预见到这个 HTML 会在同一个 html 页面中的其他地方重用。
The problem I'm facing now are the duplicated IDs, which are causing my jQuery functions to not work well.
我现在面临的问题是重复的 ID,这导致我的 jQuery 函数无法正常工作。
I do understand that IDs should be unique, however, can I avoid the issue by using the outermost <div>
with different IDs?
我知道 ID 应该是唯一的,但是,我可以通过使用<div>
具有不同 ID的最外层来避免这个问题吗?
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.
PS 我正在寻找一个有效的解决方案,因为如果我需要更改每个元素的 ID,则需要在我的 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?
我想知道在 jQuery 函数中,我是否可以#container1 > #textbox1
在选择中做类似的事情?
回答by Zach Saucier
You absolutely should not have duplicate IDs. It may work*, but it is semantically incorrect and you should not do it
你绝对不应该有重复的 ID。它可能有效*,但在语义上不正确,您不应该这样做
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
你应该重构你的 jQuery,不管它有多糟糕。最好的选择是使用一个类,也许使用父类的特定 id 来指定您想要的
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
另一种不太有吸引力但可行的方法是在 ID 的末尾添加一个数字或其他东西以使其唯一,然后使用 jQuery 检测具有 ID 特定部分的任何元素
*
- As Arun describes jQuery will accept the selector, but it is NOTfavorable because it is incorrect
*
- 正如 Arun 描述的,jQuery 将接受选择器,但它并不受欢迎,因为它不正确
回答by aroth
I do understand that "Id" should be unique, however, with the outest with different "id", can it help in solving the problem?
我确实明白“Id”应该是唯一的,但是,如果有不同的“id”,它可以帮助解决问题吗?
No. Having non-unique element ids will not work. Not consistently, in any case (different browsers and frameworks may handle this case differently).
不可以。拥有非唯一元素 ID 是行不通的。在任何情况下都不一致(不同的浏览器和框架可能会以不同的方式处理这种情况)。
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.
更喜欢使用而class
不是使用id
,特别是对于可能在页面上多次重复使用的任何组件。
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).
针对包含元素本身而不是内部组件元素设置 id,并相应地修改 jQuery 选择器。或者替代地实现您的组件,使其在使用时采用“命名空间”参数/属性,并在每个类名前加上组件内部的命名空间(这种方法在创建自定义 JSP 标记时特别有效)。
回答by Rahul Desai
I would suggest you to use class
instead of id
. Duplicate id
's are not a good practice.
我建议你使用class
而不是id
. Duplicateid
不是一个好习惯。
回答by Arun P Johny
Even though is is wrongthere is nothing wrong with the selector in jQuery
即使是错误的,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
演示:小提琴
回答by Amit
I will suggest use class instead of id. Or add some postfix while generating dynamic ids.
我会建议使用类而不是 id。或者在生成动态 id 时添加一些后缀。
回答by v42
You can't have the same id
multiple times. Use class
instead.
您不能多次使用相同的内容id
。使用class
来代替。