Выполнение скрипта в рамках цикла

208

21 мая 2018, 21:00

Имеется на сайте цикл, где выводится в виде:

<ul>
<li><form> .... </form></li>
<li><form> .... </form></li>
<li><form> .... </form></li>
</ul>
<script>
    jQuery(function ($)  {  
        $(".checkmark").click(function() {  
        setTimeout(function () {

        var price = $('.price_1 .price .woocommerce-Price-amount').clone();
                $("p.price").html(price)
                }, 300)
            });
        } )
</script>

Создал простой скрипт, который берет из одного места, и переставляет в другое. Все это должно выполняться в рамках лишь одной формы form. Но мой код заменяет значения на всей странице. Как сделать так, чтобы переставляло значения в рамках одной формы?

Вот что находится в рамках каждого элемента (в <li>...</li>):

<form class="variations_form cart" action="/product/11/" method="post" enctype="multipart/form-data" data-product_id="8" data-product_variations="" current-image="9">
<div class="img"><img width="18" height="75" src="/wp-content/uploads/2018/04/anis-91x416-66x300.png" class="wp-post-image" alt=""</div>
<table class="variations" cellspacing="0">
<tbody><tr class="attribute-ml">
<td class="label"><label for="ml">ml</label></td>
<td class="value">
<label for="ml_v_10008" class="cntnr"><input type="radio" name="attribute_ml" value="1000" id="ml_v_10008">1000<span class="checkmark"></span></label><label for="ml_v_3758" class="cntnr"><input type="radio" name="attribute_ml" value="375" id="ml_v_3758">375<span class="checkmark"></span></label>                        </td></tr>
<tr class="attribute-bottle">
<td class="label"><label for="bottle">bottle</label></td>
<td class="value">
<label for="bottle_v_ПЭТ8" class="cntnr"><input type="radio" name="attribute_bottle" value="ПЭТ" id="bottle_v_ПЭТ8">ПЭТ<span class="checkmark"></span></label><label for="bottle_v_Стекло8" class="cntnr"><input type="radio" name="attribute_bottle" value="Стекло" id="bottle_v_Стекло8">Стекло<span class="checkmark"></span></label><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Очистить</a></td></tr></tbody>
</table>
<script type="text/template" id="tmpl-variation-template"> <div class="cena">{{{ data.variation.display_price }}}</div>
<div class="price_1">{{{ data.variation.price_html }}}</div>
 </script>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="display: block;"> <div class="cena">150</div>
<div class="price_1"><span class="price"><span class="woocommerce-Price-amount amount">150.00<span class="woocommerce-Price-currencySymbol">₽</span></span></span></div>
 </div>
</div>
<div class="productName"><a target="_blank" href="/product/11/">Тестовая карточка</a></div>
                        <div class="qtyBox" data-price="150">
                            <div class="decButton">-</div>
                            <div class="incButton">+</div>
                            <label><input type="text" name="quantity" value="1" class="qty" autocomplete="off"></label>
                            <label><input type="hidden" name="add-to-cart" value="8"></label>
                            <label><input type="hidden" name="product_id" value="8"></label>
                        </div>
                        <div class="cost">
                            <p class="price"></p>
                            <p class="size">1000мл</p>
                        </div>
                        <div class="totalPrice">
                            <p>100<span> руб.</span></p>
                        </div>
                        <div class="inCartAlready" title="Уже в корзине"></div>
                        <button class="addToCart" title="Добавить в корзину"></button>


        </form>

Answer 1

jQuery(function ($) {  
  $(".checkmark").click(function() {  
    var $form = $(this).closest("form");
    var price = $form.find('.price_1 .price .woocommerce-Price-amount').clone();
    $form.find("p.price").empty();
    $form.find("p.price").append(price);
  });
});