CODEWITHSUNDEEP
phpjqueryhtmlclone
Akshay Kumar
Akshay Kumar

Reputation: 549

How to make clone separately for each element in jquery, which i fetch from database in foreach loop php

I am facing some problem in cloning in jquery..

I have some images which i fetch from database and now its available in my page in foreach loop.. and i displayed them in ul > li.

Now i want to apply .clone function from jquery (each images seperatly). so when i click any image, its clone should be appeared.

problem is now when i am clicking any image, jquery is making clone for all image. because the class for all image is same.. here is my code

<?php 
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";

$image = explode(",", $image);
?>
<html>
    <head>

    <link rel="stylesheet" href="../css/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
        $(this).click(function(){
            $(".my_image").clone().appendTo(".block");
        });
    });
    </script>

    </head>
    <body>

<div class="library">
    <ul>
    <?php
        foreach ($image as $key => $img) {
            echo "<li><img class='my_image' src='assets/$img'></li>";
        }
    ?>

    </ul>
</div>

<div class="block"></div>


    </body>
</html>

Upvotes: 0

Views: 584

Answers (1)

Juan Bonnett
Juan Bonnett

Reputation: 1853

When you call $(document).ready(...) and the first thing you use in the callback function is $(this)... with $(this) you're referring to the document itself. You should try this: 

<script>
$(document).ready(function(){
    $(".my_image").click(function(){
        $(this).clone().appendTo(".block");
    });
});
</script>

Upvotes: 1

Related Questions