Using a basic jQuery selector and unique element identifier

Question

I support a graphical interface built using jQuery. In one part of the graphical user interface, you can open several tabs for editing data.

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

The new tab has a unique identifier based on the tab index, but all the other identifier in the cloned div tab is the same as the original div tab.

Now this is causing problems because the identifier is not unique. More. When you select an input field in Firefox 3.6.8, the following works:

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

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

The DOM hierarchy 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 the IDs with the cloned contents of the div tab, but that seems like the brute force of aproach. This should be the most autonomous way of accessing content in a div without the required unique identifier.

Cloning an entire div when creating a new tab, of course, is 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's how it was built right now, and, unfortunately, it was designed and tested using the later Firefox browser in which this selector worked.

EDIT

, , , , , , .

, , , for . , for .

Answer 1

ID - . , , .

- id , . . , , DOM . jQuery DOM.

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

: .children(), .parent(), .parents() .siblings() . .find(), . .find() , , DOM. , .

Answer 2

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

Answer 3

, , .find() jQuery.

- :

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

Answer 4

AngularJS, , ng- . .

, , ? . Snipit div-, ( , ) . : . $scope.panes [] - , :

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 build an entire tab as a string and innerHTML on the page. This way you can do something like this with identifiers: (again my div-window example)

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