using jquery clone to create div elements, how can I then set the ID tag?

Question

I have the following block of jQuery code that I'm using to copy some html from one place to another:

var newLine  = $('#popup-clone .popup-contents').last().clone();
newLine.find('.popup-title').html("hello world");

$('#popup-container').append(newLine);

this runs in a loop several times so the html gets rendered like this:

    <div id="popup-container" style="display: block;">
        <div class="popup-contents">
            <a class="close">close this popup</a>
            <span class="popup-title">Title 1</span>
            <span class="popup-description"></span>
            <span class="popup-type"></span>
            <span class="popup-open"></span>
        </div>
        <div class="popup-contents">
            <a class="close">close this popup</a>
            <span class="popup-title">Title 2</span>
            <span class="popup-description"></span>
            <span class="popup-type"></span>
            <span class="popup-open"></span>
        </div>
    </div>

and so on

I want to add a unique ID to every div with class="popup-contents" but i'm not sure how i can do that? Any help is appreciated.

score 5 · Accepted Answer · answered Apr 08 '12 at 00:36

5

Use 'attr': http://api.jquery.com/attr/

newLine.attr('id', 'prefix' + someindex)

answered Apr 08 '12 at 00:36

McGarnagle

101,349
31
229
260

score 2 · Answer 2 · edited May 23 '17 at 12:27

2

If the id can be unique random then what I've done in the past is used the UUID/GUID generator from Create GUID / UUID in JavaScript? to generate random ids.

Then it's just a matter of doing

newLine.attr( "id", guid );

edited May 23 '17 at 12:27

Community

1
1

answered Apr 08 '12 at 00:39

Marc Gagne

819
5
7

thanks, however in my specific instance the ID I want to assign specific IDs based on a dataset – Felipe Kettle Apr 08 '12 at 02:25

score 1 · Answer 3 · answered Apr 08 '12 at 01:15

You can generally avoid needing to giving cloned elements an id.

The reasons an element typically needs an id is (a) as a reference for CSS styling or (b) so it can be addressed by javascript/jQuery.

In both cases you can address the cloned element at the point it is created.

score 0 · Answer 4 · answered Apr 08 '12 at 00:47

0

Use prop instead of attr:

jQuery .prop()

newLine.prop('id', 'prefix' + someindex)

answered Apr 08 '12 at 00:47

Gabe

49,577
28
142
181

using jquery clone to create div elements, how can I then set the ID tag?

4 Answers4