ChrisKsag ChrisKsag - 2 months ago 11
jQuery Question

JQuery Append remove clone Issue with Multiple Same class divs

I'm having an issue where my cloned content gets cloned twice to both sets of divs.

For example i have the following html (this HTML can not be changed)

<div class="cartItemrowInner col-lg-12">
<div class="itemTitle col-lg-12"></div>
<div class="td_replacement col-lg-12">
<label for="quantity_0" class="aural-only">Quantity </label>
</div>
<div class="td_replacement col-lg-12">
<h5><span class="CartItemName">Pie 1</span></h5>
</div>
<div class="td_replacement col-lg-12">
<p>$25.00</p>
</div>
</div>

<div class="cartItemrowInner col-lg-12">
<div class="itemTitle col-lg-12"></div>
<div class="td_replacement col-lg-12">
<label for="quantity_0" class="aural-only">Quantity </label>
</div>
<div class="td_replacement col-lg-12">
<h5><span class="CartItemName">Pie 2</span></h5>
</div>
<div class="td_replacement col-lg-12">
<p>$25.00</p>
</div>
</div>


When i try and use append remove clone to move the second to last .td_replacemnt contents into .itemTitle

it duplicates both sets of .td_replacements into both .itemTitles using this jQuery.

$('.itemTitle').append( $('.itemTitle').next('div').next('div').remove().clone() );

// THIS COULD NOT FIND CONTENTS OF .TD_replacement
$('.itemTitle').append( function(){

$(this).next('div').next('div').remove().clone()

});


So i thought using $(this) in a function might solve the problem, but it can't find the element.

Your help is much appreciated. THANK YOu

EDIT***

This is getting me closer but it's only moving the top pie 1 into the correct place

var itemTitle = $('.itemTitle');
for(var i=0; i<itemTitle.length; i++){
var itemClone = $(itemTitle).next('div').next('div').remove().clone();
$(itemTitle[i]).append(itemClone[i]);
}

Answer

WOW! Thanks for your help ya'll! (not) I can't believe i didn't receive a single answer?? Thats never happened.

Anyway here it iS!!! For others having problems! It does feel good to figure it out on your own though. Ok i'm done with the soap box!

var itemDescriptions = $('.cartItemrowInner > div:nth-last-child(2)');
var newTitlelocation = $('.itemTitle');

for(var i=0; i<itemDescriptions.length && i<newTitlelocation.length; i++){
$(newTitlelocation[i]).append(itemDescriptions[i]);

}

Many thanks JavaBits http://stackoverflow.com/users/651362/javabits

to Giving multiple conditions in for loop in Java

Comments