jQuery基本选择器用法和非唯一元素ID [英] JQuery basic selector usage and non unique element ID

问题描述

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

打开新标签页时，将通过克隆第一个标签页内容div和 更新div中的输入字段.

根据标签索引，为新标签赋予了唯一的ID，但所有标签 克隆的标签div中的其他ID与原始标签div相同.

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

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

这将选择ID为tabs-2的tab 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当然是 粗暴的破解，一个更优雅的解决方案是重用相同的div， 更改内容取决于所选的选项卡，但这就是它的方式 现已构建，很遗憾，它是使用较新的版本进行开发和测试的 该选择器在其中运行的firefox浏览器.

发布前修改

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

编辑

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

解决方案

ID是唯一的标识符.引入重复的ID后，您手中的文件无效.

解决此问题的最佳方法是避免在将要克隆的任何内容上使用id.而是使用唯一"类名称来标识元素.然后，在克隆它时，您可以将DOM遍历到类的每个副本. jQuery为此具有非常好的DOM遍历方法.

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

此外: .children()，.parent()，.parents()和.siblings()特别有用.除非没有帮助，否则我将远离.find().如果您正在DOM中搜索许多节点，则.find()可能会很慢.由于您正在构建接口，因此可能是这种情况.

I'am maintaining a GUI built using JQuery. In one part of the GUI, multiple tabs can be opened to edit data.

When a new tab is opened, it is created by cloning the first tab content div and updating the input fields in the div.

The new tab is given a unique ID based on the tab index, but all other ID's within the cloned tab div are the same as the original tab div.

Now, that seems to cause problems since ID's are not unique any more. When selecting an input field the following works on Firefox 3.6.8:

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

This selects the tab div with ID tabs-2 and then selects the input field within that div with the ID scriptName and sets its value. Now this does not work on Chrome or Firefox 3.0.19.

The DOM hierachy looks something like this

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

One solution would be to make all ID's wihtin the cloned tab content div unique, but that seems like a brute force aproach. It must be possible to address the content within a div in a more independent way without require a unique ID.

The cloning of the whole div when generating a new tab is of course a crude hack, a more elegant solution would be to reuse the same div but change the content depending on the selected tab, but that is how it is built right now and unfortunately it was developed and tested using a later firefox browser where this selector worked.

Pre-post EDIT

I found a lot of related questions with answers that gave some hints on how to solve this, when I inserted my offline-edited question, but I post this question anyway since good suggestions for how to solve this are always welcome.

EDIT

I'am trying the class approach right now, I do have one problem though, some input fields uses labels with for attribute, the for attribute must point to a unique id. But that can be solved by omitting the for attribute and make the input field a nested element instead.

解决方案

ID's are unique identifiers. The moment you introduce a duplicate id, you have an invalid document on your hands.

The best way to get around this is to refrain from using id's on anything that is going to be cloned. Instead, use a "unique" class name to identify the element. Then, when it is cloned, you can walk down the DOM to each copy of the class. jQuery has very good DOM traversal methods for this.

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

Additionally: .children(), .parent(), .parents(), and .siblings() are particularly useful. I'd stay away from .find() unless it cannot be helped. .find() can be slow if you are searching through many, many nodes in the DOM. Since you're building an interface, this might be the case.

这篇关于jQuery基本选择器用法和非唯一元素ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！