Как обратиться к нужному блоку через форму?

Question

[ligisayan]

Всем привет. Есть в интернет-магазине форма, которая устанавливает стоимость товара в зависимости от выбранных пользователем атрибутов. Мне нужно обратиться к блоку с классом price и поменять его месторасположение (в зависимости от условия). Проблема в том, что если смотреть через консоль, то видно, что 260.000 руб. формируется через атрибут data-product_variations самой формы, т.е. блок, в котором он формируется - пустой, а если смотреть html-код страницы, то он там есть. Вопрос: как обратиться мне к блоку с классом .price, чтобы в дальнейшем с ним манипулировать? Как вы могли заметить - такой строчкой $this.find('.price') этого не получается сделать.

<!-- То, что видно в скрипте через консоль-->
<div class="product-frame">
  <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3351" data-product_variations="[{&quot;variation_id&quot;:3354,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:260000,&quot;display_regular_price&quot;:260000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;large&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>260.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-1&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;},{&quot;variation_id&quot;:3355,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:160000,&quot;display_regular_price&quot;:160000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;medium&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>160.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-2&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;},{&quot;variation_id&quot;:3356,&quot;variation_is_visible&quot;:true,&quot;variation_is_active&quot;:true,&quot;is_purchasable&quot;:true,&quot;display_price&quot;:80000,&quot;display_regular_price&quot;:80000,&quot;attributes&quot;:{&quot;attribute_pa_size&quot;:&quot;small&quot;},&quot;image_src&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;,&quot;image_title&quot;:&quot;&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;<span class=\&quot;price\&quot;><span class=\&quot;amount\&quot;>80.000&nbsp;руб.<\/span><\/span>&quot;,&quot;availability_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;PS101-3&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;}]">

    <div class="single_variation"></div>
  </form>
</div>
<!-- Итог -->
<div class="product-frame">
  <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3351" data-product_variations="..">
    <div class="single_variation"><span class="price"><span class="amount">260.000&nbsp;руб.</span></span>
    </div>
</div>
</form>

$('.product-frame').each(function() {
	  var $this = $(this);
	  var variations_form = $this.find('.variations_form');
	  console.log(variations_form.html());
	  $this.find('.price').css("top", (height + 32) + "px");
	}
	});

.product-frame {
  position: relative;
}
.product-frame .price {
  position: absolute;
  top: 379px;
  left: 10px;
}

Comments

[ligisayan]

Вообщем: делаю я так

var variationsFormParsed = JSON.parse(variations_form); // уже объект
console.log(variationsFormParsed[1]['price_html']);

и получаю в консоли:

<span class="price"><span class="amount">200.000 руб.</span></span>

А как теперь обратить к классу price ?

[WP Panda]

filter()

[ligisayan]

WP Panda: имеете ввиду вот так: variationsFormParsed[0]['price_html'].filter(".price").css("top",(height+32)+"px"); ? но, пишет: Uncaught TypeError: variationsFormParsed[0].price_html.filter is not a function

[WP Panda]

var $oj = variationsFormParsed[0]['price_html'];
$($oj).filter(".price").css({"top" : height+32});<code>

[WP Panda]

ligisayan:

var $oj = variationsFormParsed[0]['price_html'];
$($oj).filter(".price").css({"top" : height+32});

[ligisayan]

WP Panda: да, спасибо большое - выводит! единственное, что не получается изменить ни стили, ни html
$($oj).filter(".price").css({"top" : height+32});
$($oj).filter(".price").html().replace(/(new price)/, "$1")
что видно здесь console.log($($oj).filter(".price").html());