javascript Html重复ID

jtjikinw  于 2023-01-04  发布在  Java
关注(0)|答案(9)|浏览(149)

我的控件是根据用户输入动态构建的,有n个文本框的ID也是动态的。
然而,我没有预见到这个HTML会在同一个HTML页面中的其他地方被重用。
我现在面临的问题是重复的ID,这导致jQuery函数无法正常工作。
我知道ID应该是唯一的,但是,我可以通过使用具有不同ID的最外层<div>来避免这个问题吗?
有没有Maven能给我一些好的建议?
P.S.我正在寻找一个有效的解决方案,因为如果我需要更改每个元素的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的操作?

3htmauhk

3htmauhk1#

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

您应该重新构建jQuery,不管它有多糟糕,最好的选择是使用一个类,也许可以使用父类的特定id来指定您想要的类
另一种不太吸引人但可行的方法是在ID的末尾添加一个数字或其他内容,使其唯一,然后使用jQuery检测具有ID特定部分的任何元素
*-正如Arun所描述的,jQuery将接受选择器,但它有利,因为它是不正确的

kse8i1jr

kse8i1jr2#

我确实理解“Id”应该是唯一的,但是,有了不同“id”的outest,它能帮助解决问题吗?
不。拥有非唯一的元素id是行不通的。在任何情况下都不一致(不同的浏览器和框架可能会以不同的方式处理这种情况)。
有没有Maven能给予我一些好的建议?
使用class比使用id更好,特别是对于任何可能在页面上多次重用的组件。
针对包含元素本身而不是内部组件元素设置id,并相应地修改jQuery选择器。或者实现组件,使其在使用时接受“namespace”参数/属性,并在组件内部为每个类名添加名称空间前缀(这种方法在创建自定义JSP标记时效果特别好)。

liwlm1x9

liwlm1x93#

    • 即使is是错误的**jQuery中的选择器没有任何错误
$('#Container1 #TextBox1').val(1)
$('#Container2 #TextBox1').val(2)

演示:Fiddle
更好的选择是使用属性选择器

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

演示:Fiddle

8qgya5xd

8qgya5xd4#

我建议您使用class而不是id。重复的id不是一个好的做法。

icomxhvb

icomxhvb5#

我建议使用class代替id,或者在生成动态id时添加一些后缀。

wz8daaqr

wz8daaqr6#

取决于HTML版本:

  1. HTML 4 ID必须是文档范围内唯一的。
  2. HTML5ID在其容器树中是唯一的.
    但我们认为这不是好的做法
sycxhyv7

sycxhyv77#

不能多次使用相同的id。请改用class

xcitsw88

xcitsw888#

组件:如果你在例子中写了可重用的组件,那么如果你把两个或更多的组件放到一个文档中,你会得到无效的html。所以用id代替class

zazmityj

zazmityj9#

不建议这样做,在编写语义HTML代码时也是不正确的。
但它不会在浏览器中抛出错误,也不会破坏Chrome中的document.querySelectorAll()测试,它的工作原理和以前一样。

let a = document.querySelectorAll('#header');
console.log(a.length);
a = document.querySelector('#header');
console.log(a);
<body>
  <h1 id="header">header 1</h1>
  <h1 id="header">header 2</h1>
</body>

相关问题