JQuery基本选择器用法和非唯一元素ID

Question

我正在维护一个使用 JQuery 构建的 GUI。在 GUI 的一部分中， 可以打开多个选项卡来编辑数据。

打开新选项卡时，它是通过克隆第一个选项卡内容 div 和 更新 div 中的输入字段。

新选项卡根据选项卡索引被赋予唯一的 ID，但所有 克隆的选项卡 div 中的其他 ID 与原始选项卡 div 相同。

现在，这似乎会引起问题，因为 ID 不是唯一的 更多的。选择输入字段时，以下内容适用于 Firefox 3.6.8:

$('#tabs-2 #scriptName').val( data.name );

这将选择 ID 为 tabs-2 的选项卡 div，然后选择输入 该 div 中的字段具有 ID scriptName 并设置其值。现在 这不适用于 Chrome 或 Firefox 3.0.19。

DOM 层次结构看起来像这样

<div id="tabs">
     <div id="tabs-1">
         ...
         <input id="scriptName"/>
         ...
     </div>
     ...
     <div id="tabs-2">
         ...
         <input id="scriptName"/>
         ...
     </div>
 </div>

一种解决方案是在克隆的选项卡内容中创建所有 ID div 是独一无二的，但这似乎是一种蛮力方法。一定是 可以以更独立的方式处理 div 中的内容 无需唯一 ID。

生成新选项卡时克隆整个 div 当然是 粗略的 hack，一个更优雅的解决方案是重用相同的 div，但是 根据所选选项卡更改内容，但这就是它的方式 是现在构建的，不幸的是它是使用后来的版本开发和测试的 该选择器在 Firefox 浏览器中工作。

事前编辑

当我插入离线编辑的问题时，我发现了很多相关问题的答案，这些问题的答案给出了如何解决此问题的一些提示，但无论如何我都会发布此问题，因为始终欢迎有关如何解决此问题的良好建议。

编辑

我现在正在尝试类方法，但我确实有一个问题，一些输入字段使用带有 for 属性的标签，for 属性必须指向唯一的 id。但这可以通过省略 for 属性并将输入字段设置为嵌套元素来解决。

Answer 1

只是一个建议，你可以将输入的 id 设置为类吗？这样克隆时就不会出现问题。您的代码将类似于 $('#tabs-2 .scriptName').val( data.name );