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.

Answer 1

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 🙂