CODEWITHSUNDEEP
javascriptjqueryhtml
ʞɹᴉʞ ǝʌɐp
ʞɹᴉʞ ǝʌɐp

Reputation: 5650

How to modify a jquery html clone and insert multiple times after a node?

I have a html structure like this.

<div id='mydiv'> 
   <span class="tobecloned">  some heavy dom <br/> </span>
   <span class="tobecloned">  some heavy dom  <br/></span>
   <span class="tobecloned" id="last">  last some heavy dom  <br/></span>
</div>

Now I want to clone the last span.tobecloned modify this clone and insert all modified clone instances multiple times after the last span.tobecloned.

Modification and insertion will happen in a for loop, I am trying something like this:

lastSpan = $('.tobecloned').last();
cloneHtml = $('.tobecloned').last().clone();
for (i = 0; i < 4; i++) {
    // Here I am making enough changes in cloneHtml
   console.log(i);
   cloneHtml.attr('status', i + 1);
   cloneHtml.insertAfter($('.tobecloned').last());
 }

Above loop runs 4 times but adds cloned element only once. Here is the demo to reproduce the issue http://jsfiddle.net/illumine/SN4rr/

How can I fix this?

Also notice that I am adding new attributes in the for loop. In practical application I'll be modifying more attribute not just 1 or 2.

Is there a better way to do it?

Upvotes: 3

Views: 621

Answers (5)

A. Wolff
A. Wolff

Reputation: 74420

var $lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
    var $clone = $lastSpan.clone();
    $clone.attr('status', i + 1)
          .appendTo($lastSpan.parent());
}

Upvotes: 5

varnie
varnie

Reputation: 2595

is this what you're trying to make?

for (var i = 0; i < 4; i++) {
    var cloneHtml = $('.tobecloned').last().clone();
    var lastSpan = $('.tobecloned').last();
    // Here I am making enough changes in cloneHtml
    console.log(i);
    cloneHtml.attr('status', i + 1);
    cloneHtml.insertAfter($('.tobecloned').last());
}

jsFiddle is here: http://jsfiddle.net/vL9YU/

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:-http://jsfiddle.net/adiioo7/SN4rr/4/

JS:-

lastSpan = $('.tobecloned').last();

for (i = 0; i < 4; i++) {
    // Here I am making enough changes in cloneHtml
    console.log(i);
    cloneHtml = $('.tobecloned').last().clone();
    cloneHtml.attr('status', i + 1);
    cloneHtml.insertAfter($('.tobecloned').last());
}

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

When you clone the element you are creating a new element, so when you add that you can only add it once. Adding it again simply adds the same element, but doesn't duplicate it.

Create a new clone each time you want to add one...

lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
   cloneHtml = $('.tobecloned').last().clone();
    // Here I am making enough changes in cloneHtml
   console.log(i);
   cloneHtml.attr('status', i + 1);
   cloneHtml.insertAfter($('.tobecloned').last());
}

Upvotes: 1

Maxim Kumpan
Maxim Kumpan

Reputation: 2635

In your for loop, cloneHtml is a jQuery object. If you try to insertAfter() it several times, it will simply move. Use .clone() inside the loop, before every edit.:

lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
    // Here I am making enough changes in cloneHtml
    console.log(i);
    cloneHtml = lastSpan.clone();
    cloneHtml.attr('status', i + 1);
    cloneHtml.insertAfter($('.tobecloned').last());
}

Edit: sorry, cloning twice here... Fixed.

Upvotes: 3

Related Questions