CODEWITHSUNDEEP
javascriptjquery
soum
soum

Reputation: 1159

cloning divs are not not working in IE using jquery clone()

I am trying to clone divs and append them into container divs. The solution i have works fine in Chrome but does not run at all in IE. I have tried researching this and even asked about this problem but couldnt really find a working solution. Does anyone have any suggestion? This is what I have so far

The html looks somewhat like this

<div class="holdOne"></div>
<div class="holdTwo"></div>
<div class="holdThree"></div>

<div class="productHolder">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
</div>

jquery

$(function() {
    $('.productHolder .product').eq(0).clone().appendTo('.holdOne');
    $('.productHolder .product').eq(1).clone().appendTo('.holdOne');
    $('.productHolder .product').eq(2).clone().appendTo('.holdOne');

    $('.productHolder .product').eq(1).clone().appendTo('.holdTwo');
    $('.productHolder .product').eq(2).clone().appendTo('.holdTwo');
    $('.productHolder .product').eq(3).clone().appendTo('.holdTwo');

    $('.productHolder .product').eq(0).clone().appendTo('.holdThree');
    $('.productHolder .product').eq(5).clone().appendTo('.holdThree');
    $('.productHolder .product').eq(4).clone().appendTo('.holdThree');
});

Upvotes: 0

Views: 1840

Answers (1)

Jace
Jace

Reputation: 3072

Could be a bug? jQuery .clone() .html() in IE Bug

So perhaps ditching the clone() and just using the elements html() value could work? It's a bit messier, though.

var dummy = $('.productHolder .product').eq(0);
$('.holdOne').append(dummy.html());

Obviously you'll need to repeat that for each clone. I'm on a Mac and can't test IE, but hopefully that helps. Check out the fiddle below, although it doesn't grab the outerHTML.

Fiddle

http://jsfiddle.net/URKq5/1/

Edit

I found another SO post that could help with the outer HTML. This should help put it more inline with what you originally had:

$('.holdOne').append($('.productHolder .product').eq(0)[0].outerHTML);

New Fiddle

http://jsfiddle.net/URKq5/3/

SO Link

jQuery: outer html()

Upvotes: 1

Related Questions