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