Cloning and assigning dynamic element IDs
Hi Guys,
Well this is my first post, I have been using jQuery here and there for a few small enhancements, I have to say I really like it so far, but it seems I have run into a little snag. If you look at the code below it should make some sense, hopefully.
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>MiSland MX</title>
- <style>
- .ninja {
- visibility: hidden;
- background: green;
- }
- </style>
- </head>
- <body>
- <script src="jquery-2.1.0.js"></script>
- <script>
- var c = 0;
-
- $( document ).ready(function() {
-
- $(btnRemove).click(function(){
- $(this).closest('div').remove();
- console.log("remove row");
- });
-
- $(btnClone).click(function(){
- $(tmpClone).clone(true).appendTo(tmpList).attr('id','line'+(++c)).attr('class','').show();
- console.log("create new row");
-
- $('line'+c).contents().attr('id','line'+(c)).attr('id','id'+c); //issue
- console.log("child colored "+'line'+c+"");
- });
-
- $(document).ready(function() {
- console.log("page loaded");
- });
- });
-
- </script>
-
- <button id=btnClone>New Line</button>
- <div id=tmpClone class="ninja">
- <button id=btnRemove>Remove</button>
- Name: <input id="rep_firstname" />
- Surname: <input id="rep_lastname" />
- Contact Number: <input id="rep_contactnumber" />
- Gender: <select id="rep_gender">
- <option>Male</option>
- <option>Female</option>
- <option>Unspecified</option>
- </select>
- Dev1: <select id="rep_Dev">
- <option>No</option>
- <option>Something Sensible</option>
- <option>Dev2Val</option>
- <option>Dev3Val</option>
- </select>
- </div>
- <div id=tmpList> </div>
-
- </body>
- </html>
Now as you can see the issue I have at the moment comes when I create a "New Line", it clones the line correctly and displays it with a "Remove" button, which works perfectly when clicked. What I want is when someone clicks the "New Line" button, not only to have the encapsulating DIV uniquely named, but also all the elements in it.
e.g:
rep_gender => line#_gender
or rep_firstname => line#_firstname
Is there a way to loop through all the elements in the parent element?
Regards