Question

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

当打开一个新标签时，它是通过克隆第一个标签内容div和来创建的更新div中的输入字段。

根据选项卡索引为新选项卡提供唯一ID，但全部克隆的tab div中的其他ID与原始tab div相同。

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

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

这将选择带有标签tab-2的制表符div，然后选择输入具有ID scriptName的div中的字段并设置其值。现在这不适用于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当然是一个粗暴的黑客，一个更优雅的解决方案是重用相同的div但是根据所选标签更改内容，但这就是它现在是内置的，不幸的是它是后来开发和测试的这个选择器工作的firefox浏览器。

赛前编辑

当我插入离线编辑的问题时，我发现了许多相关的问题以及如何解决这个问题的一些提示，但我仍然发布了这个问题，因为总是欢迎有关如何解决这个问题的好建议。 / p>

修改

我现在正在尝试类方法，但我确实有一个问题，一些输入字段使用带有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应用程序，当我在重复元素时遇到了同样的问题。这是我如何解决它。

你的标签，即父元素，有唯一的ID吗？所以，请关注该标签的子项。我的div-windows中的剪辑可以让孩子们获得可调整大小的父母以及孩子们的重音（或者像我的情况一样调整大小）。提示：我刚从孩子们身上留下身份证。 $ scope.panes []是我的窗口数组，我只是抓住了ID，每个都是孩子们：

PreferenceFragment

另一种解决方案是将整个标签构建为字符串，将innerHTML构建为页面。这样你就可以用ids做这样的事情:(再次我的div窗口例子）

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

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

4 个答案: