JQuery basic selector usage and non unique element ID

Question

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 firs

Answer 1

I have a AngularJS app where I ran into the same problem when ng-repeating elements. Heres how I solved it.

Your tabs, the parent element, have unique ID's right? So just go down the children of that tab. Snipit from my div-windows to get children for resizable parent and alsoResize (or manualy resize as in my case) the children. Hint: I just left the IDs out of the children. $scope.panes[] is my window array, I just grab the ID and each out the children:

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

Another solution would be to built the whole tab as a string and innerHTML it to the page. This way you can do someting like this with the ids: (again my div-window example)

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

Answer 2

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.

Answer 3

just a suggestion, can you make id of the input as class? So that you don't have a problem when cloning. and your code would be something like, $('#tabs-2 .scriptName').val( data.name );

Answer 4

I don't know will it helps in your case but you can try .find() jQuery method.

Try something like this expression:

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