Working with elements in jquery

Question

I have the current code:

<div class="submenu" id="submenu0">
    <ul class="root" id="root0">
        <li class="line_element line0"><a><img src="images/lifevl13.jpg" style="padding-left: 5px; width:20px; height:20px;" />Video</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl12.jpg" style="padding-left: 5px; width:20px; height:20px;" />Ebook</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl3.jpg" style="padding-left: 5px; width:20px; height:20px;" />Music/Audio</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl2.jpg" style="padding-left: 5px; width:20px; height:20px;" />Email</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl4.jpg" style="padding-left: 5px; width:20px; height:20px;" />Mail</a></li>
    </ul>
</div>

I dynamically clone the above and place it in another part of the page which is also dynamically created. What I want is for the line0 part to change to line1, line2 etc. as new elements are added, that way I can track them.

My add button event handler typically performs this action, but for some reason I can't seem to get it to work on each individual 'li' element. I would post my jquery, but it's a whole lot of code so unless you request it I won't provide it here.

Edit: (Ok here's parts of the jquery)

    var numOfParts = ($('.gig_parts').length);
    $('.root.line_element:last').attr('id', 'line_element'+numOfParts);

The 'numOfParts' variable keeps track of the 'fieldsets' which are dynamically created and tacks it onto the end of my id's, I understand this isn't a good way of doing this, but trust me, I'm too far into change it now, perhaps in a later redesign. I'm still rather new to all this.

Step one : make your jquery short enough while demonstrating the problem. Step two : post it. — Denys Séguret, Jan 09 '13 at 11:19
Incremental `id` and `class` attributes are **always** a bad idea - no exceptions. It quickly turns into a descending circle of maintenance hell. A better solution is to use a shared `class` and traverse within a known parent element to find what you need. — Rory McCrossan, Jan 09 '13 at 11:19
Can you provide an example? I have used incremental ids, classes, and names, because on this form inparticular I submit multiple parts at one time and need something to identify them by in the post and files array. Also, why the hell do I have a -2 for a rating already? — Highspeed, Jan 09 '13 at 11:25
+1 from me. The -1 police cut new posters no slack whatsoever. — Nick, Jan 09 '13 at 12:28
+1 also, your `$('.gig_parts').` does not match your example markup, but we can see what you have intended here, back to no -2 :) — Mark Schultheiss, Jan 09 '13 at 13:22

score 1 · Accepted Answer · edited May 23 '17 at 10:24

My approach to a similar situation has historically been to eschew clone and to create the elements from scratch each time, either (1) with jQuery or (2) with a document fragment. That way, you can control the id and class with less fuss.

As it says in the jQuery documentation:

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

That said, you may like to look at this post for some further commentary. This and this may also be of interest.

Further thoughts:

Regarding incremental class and id numbers, the key issue is the purpose they are serving. If you can avoid giving each element a unique id and deal with it effectively in another manner, then that's preferable. The same can be said for each class. Javascript and jQuery allow you to deal with this element, and so it may be that you don't need unique identifiers at all.

In my case, I build thousands of elements by AJAX from a database, and each one has a unique id that corresponds to its database index. This is necessary to maintain the link between the HTML element and the MySQL record, but that may not be the case in your situation. It's certainly not the same as building an index from 1 every time.

In summary, you need to establish what the unique class and id identifiers are achieving for you :)

A pleasure, @BrianAllanWest. Get back to me with a comment here if something isn't clear :) — Nick, Jan 09 '13 at 12:49

score 0 · Answer 2 · answered Jan 09 '13 at 13:18

I know you have your answer, but I am providing this alternative in case someone does NOT want to use duplicated/inserted id etc and just want to clone something they have, using your example. I use the .data() to store the current rows id/index number - not specifically needed as you could also find its current index - just to show how really.

To demo I modified your markup slightly as such:

<div class="submenu" id="submenu0">
  <ul class="root" id="root0">
    <li class="line_element"><a><img src="images/lifevl13.jpg" />Video</a></li>
    <li class="line_element"><a><img src="images/lifevl12.jpg" />Ebook</a></li>
    <li class="line_element"><a><img src="images/lifevl3.jpg" />Music/Audio</a></li>
    <li class="line_element"><a><img src="images/lifevl2.jpg" />Email</a></li>
    <li class="line_element"><a><img src="images/lifevl4.jpg" />Mail</a></li>
  </ul>
</div>
<div id="rowCount"></div>
<button id="rowAdd">Add New Row</button>

Then using this VERY verbose code I show how to clone the last row and update it. You could refactor this code to make it more dense/less verbose but I left it that way specifically to demonstrate each step.

//just show current row count
var numOfParts = $('#root0>.line_element').length + " rows";
$('#rowCount').text(numOfParts);
// show current rows numbers in a span and give
// them a "myid" data value with that value
//this is very verbose to show detail
$('#root0>.line_element').each(function () {
  var row = $(this);
  row.data('myid', row.index());
  row.append('<span class="rownumber">' + row.data("myid") + '</span>');
});

// add a new row
$('#rowAdd').click(function () {
  // add a row
  $('#root0>.line_element:last').clone().appendTo('#root0');

  // update the row count display
  var numOfParts = $('#root0>.line_element').length;
  $('#rowCount').text(numOfParts + " rows");

  // update the added row myid
  var rowAdded = $('#root0>.line_element:last');
  rowAdded.data('myid', rowAdded.index());

  // show what we are doing
  // then update the current added row displayed number using its data myid
  alert('updating: ' + $('#root0>.line_element:last>.rownumber').text() + " to " + rowAdded.data("myid"));
  $('#root0>.line_element:last>.rownumber').text(rowAdded.data("myid"));
});

Here is this as a working example: http://jsfiddle.net/RCTYZ/

Working with elements in jquery

2 Answers2