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

Answer 2

ID 是唯一标识符。当您引入重复的 ID 时，您手上的文档就无效了。

解决这个问题的最佳方法是避免在任何要克隆的内容上使用 id。相反，使用“唯一”类名来标识元素。然后，当它被克隆时，您可以沿着 DOM 走到该类的每个副本。 jQuery 为此提供了非常好的 DOM 遍历方法。

http://api.jquery.com/category/traversing/

另外： .children()、.parent()、.parents() 和 .siblings() 特别有用。除非没有办法，否则我会远离 .find() 。如果您在 DOM 中搜索很多很多节点，.find() 可能会很慢。由于您正在构建一个界面，因此情况可能就是这样。

Answer 3

我不知道它对你的情况有帮助，但你可以尝试 .find() jQuery 方法。

尝试这样的表达：

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

Answer 4

我有一个 AngularJS 应用程序，在 ng-repeating 元素时遇到了同样的问题。这是我解决它的方法。

您的选项卡（父元素）具有唯一的 ID，对吧？因此，只需查看该选项卡的子选项即可。从我的 div 窗口中进行 Snipit，以获取可调整大小的父级的子级，并调整子级的大小（或在我的情况下手动调整大小）。提示：我刚刚把身份证留给了孩子们。 $scope.panes[] 是我的窗口数组，我只需获取 ID 和每个子元素：

var objParent = $('#' + $scope.panes[index].windID); //entire div window
var objChild = [];
//objChild[0] = title bar
//objChild[1] = contentpane
objParent.children().each(function(i){
    objChild[i] = $(this);
});

另一个解决方案是将整个选项卡构建为字符串，并将其innerHTML 添加到页面中。这样你就可以用 ids 做这样的事情：（再次是我的 div-window 示例）

child1ID = "id='"+windID+titlebar+"'";
child2ID = "id='"+windID+contentpane+"'";