CODEWITHSUNDEEP
javascriptphpjqueryhtml
user4563161
user4563161

Reputation:

Jquery Clone only the clicked elements contents

I have this issue which I'm sure I have solved before but cant for the life of me figure it out again. What I want to happen is one someone clicks a blend tile it clones that tile's featured image into the mixes area which it does but it kindly takes every other image with it. I only want it to grab the clicked elements img nothing more.

My loop does add numeric values to the blend tiles num-<?php echo $i++; ?>

So even a working solution where it grabs that unique class could work for the clone.

Update

In order for it not to continually add the image to the repeated .color-img it will have to grab the class and inject it into <li> then also some how add it into the appendTo so that when the item is clicked it only ever add's it to the newly created box.

$(function() {
    $(".blend-tile").click(function() {
        $("#mixer ul.mixers").append('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>'), slideumus();
        $(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');
    });

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

<!-- wordpress Loop -->
<li class="blend-tile align num-<?php echo $i++; ?>">
    <div class="tpic">
        <?php the_post_thumbnail( 'thumb-blend' ); ?>
    </div>
    <section class="infora">
        <h2>
            <?php the_title(); ?>
        </h2>
        <p class="price">
            <span class="amount">
            &pound;
                <?php 
                    $available_variations = $product->get_available_variations();
                    $variation_id = $available_variations[0]['variation_id'];
                    $variable_product1 = new WC_Product_Variation( $variation_id );
                    $regular_price = $variable_product1 ->regular_price; 
                    echo $regular_price;?>
                </span>
            </p>
        </section>
    </li>
    <!-- end of wordpress Loop -->
    <div id="mixer" class="t-align">
        <ul class="mixers"></ul>
    </div>

Upvotes: 1

Views: 75

Answers (2)

epascarello
epascarello

Reputation: 207501

Well you are not selecting the one that was clicked, you have a selector inside that is selecting all the elements. You can get the one that was clicked by using this and you can get the elements inside with find.

$(".blend-tile .tpic").clone...

needs to be

$(this).find(".tpic").clone...

and if you have multiple .color-img' your code is also going to fail as it will append to every one of those elements. If you want to only to append to the one that was created, than you are going to have to keep a reference to the one that was just added.

var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div></div><div class="t-align"><div class="mix-value"></div></div></div></li>');

$("#mixer ul.mixers").append(li);
slideumus(); //no clue hy this was there with a comma
$(this).find(".tpic").clone(true, true).contents().appendTo(li.find('.color-img'));

Upvotes: 0

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

You can try this:

$(".tpic", this).clone(true, true).contents().appendTo('.color-img');

Because if you do

$(".blend-tile .tpic").clone(true, true).contents().appendTo('.color-img');

It will clone .tpic into your web page.

Upvotes: 1

Related Questions