Html 重复 ID

IT技术 javascript jquery html
2021-03-21 07:59:14

我的控件是根据用户输入动态构建的,有些n文本框的 ID 也是动态的。

但是,我没有预见到这个 HTML 会在同一个 html 页面中的其他地方重用。

我现在面临的问题是重复的 ID,这导致我的 jQuery 函数无法正常工作。

我知道 ID 应该是唯一的,但是,我可以通过使用<div>具有不同 ID的最外层来避免这个问题吗?

有没有高手可以给我一些好的建议?

PS 我正在寻找一个有效的解决方案,因为如果我需要更改每个元素的 ID,则需要在我的 jQuery 中进行大量工作。

请帮忙。谢谢!

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

我想知道在 jQuery 函数中,我是否可以#container1 > #textbox1在选择中做类似的事情

6个回答

你绝对不应该有重复的 ID它可能有效*,但在语义上不正确,您不应该这样做

你应该重构你的 jQuery,不管它有多糟糕。最好的选择是使用一个类,也许使用父类的特定 id 来指定您想要的

另一种不太有吸引力但可行的方法是在 ID 的末尾添加一个数字或其他东西以使其唯一,然后使用 jQuery 检测具有 ID 特定部分的任何元素

*- 正如 Arun 描述的,jQuery 将接受选择器,但它并不受欢迎,因为它不正确

我还建议使用类:]
2021-04-26 07:59:14
嗯...从技术上讲,您可以使重复的 id 与类似的东西一起使用$('[id="TextBox1"]'),但这是一个非常糟糕的主意。
2021-05-10 07:59:14
@AdamMerrifield '当然,我正在更新(:
2021-05-19 07:59:14

我确实明白“Id”应该是唯一的,但是,如果有不同的“id”,它可以帮助解决问题吗?

不可以。拥有非唯一元素 ID 是行不通的。在任何情况下都不一致(不同的浏览器和框架可能会以不同的方式处理这种情况)。

有没有高手可以给我一些好的建议?

更喜欢使用而class不是使用id,特别是对于可能在页面上多次重复使用的任何组件。

针对包含元素本身而不是内部组件元素设置 id,并相应地修改 jQuery 选择器。或者替代地实现您的组件,使其在使用时采用“命名空间”参数/属性,并使用组件内部的命名空间作为每个类名的前缀(这种方法在创建自定义 JSP 标记时特别有效)。

即使是错误的,jQuery 中的选择器也没有任何问题

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

演示:小提琴


更好的选择是使用属性选择器

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

演示:小提琴

@SajithNair 不是真的......不会推荐它
2021-04-26 07:59:14
@ArunPJohny - 这一定有点迂腐。不同的浏览器(和框架)会以不同的方式处理这种情况。在某些情况下,它可以大致按预期工作。如前所述,依赖它并不是一个好主意。但它可以工作。
2021-04-30 07:59:14
这将是 SO 投票模式的良好测试用例......(它会变得多么疯狂):)
2021-05-07 07:59:14
投反对票的请解释一下,以便其他人学习:(
2021-05-17 07:59:14
@SajithNair 因为 ID 必须是唯一的,无论如何不应该重复......有人只是想确保它没有被破坏
2021-05-20 07:59:14

我建议你使用class而不是id. Duplicateid不是一个好习惯。

我会建议使用类而不是 id。或者在生成动态 id 时添加一些后缀。