Question

I have a little problem when i try to clone an element with jquery basically I Have this, i want to clone the div called clone and put in other div in some where else.

<li class="jqModal"  >
    <div class="clone">
    <div class="image">
            <img src="<?php echo $products[$j]['thumb']; ?>"
                 title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" />
    </div>
    <h2><a href=""><?php echo $products[$j]['name']; ?></a></h2>
    <strong class="price"><?php echo $products[$j]['price']; ?></strong>
    <a href="<?php echo $products[$j]['href']; ?>">More details</a>
    </div>


</li>`

I use this in my document ready

$(document).ready(function () {
   $(".product-list li").hover(
      function () {
         //replace image and id
         $var = $(this).clone(false).find("#clone").
         $('#div-to-replace').replaceWith($var);
      }
   );
});

But its not working any advice, thank you in advance. 🙂

Answer 1

Try this:

$(".product-list li").hover(
    function () {
        //replace image and id
        $var = $('.clone', this).clone();
        $('#div-to-replace').replaceWith($var);
    }
);

Changes to your code:

1. You want to clone the element with the class “clone”, not the id: #clone -> .clone
2. If you clone first and then find the element, then you’re cloning too much, so I changed the selector for cloning
3. At the end of this line there’s a dot where should be a semicolon.​