Не получается переопределить позиционирование с помощью скрипта

[ligisayan]

Всем привет. Есть магазин и секция с двумя товарами: один статический, второй вариативный. Цену на товары абсолютно позиционирую внутри контейнера в зависимости от содержимого. Содержимое кода товаров во многом совпадают, но для статического товара высоту скрипт переопределяет все верно, а для динамического переопределения не происходит. наглядно это можно видеть в <a href="http://jsfiddle.net/ddupm8d8/1/">fiddle</a> В чем подвох?

[Aetae]

Думается скрипт устанавливает позицию один раз при загрузке страницы потому так и выходит. Надо вам добавить в функцию динамической подгрузки, в конец, вызов той функции, что отвечает за позиционирование, чтоб она каждый раз считала заново.

P.S. Однако позиционировать элементы надо с помощью css, без всяких скриптов, тем более в такой банальной ситуации. Скрипты для простой вёрстки - это путь в ад.

[ligisayan]

Думается скрипт устанавливает позицию один раз при загрузке страницы потому так и выходит. Надо вам добавить в функцию динамической подгрузки, в конец, вызов той функции, что отвечает за позиционирование, чтоб она каждый раз считала заново.

P.S. Однако позиционировать элементы надо с помощью css, без всяких скриптов, тем более в такой банальной ситуации. Скрипты для простой вёрстки - это путь в ад.

Aetae, а почему вы считаете, что это простая верстка?
надеюсь, вы понимаете, что магазин работает на движке с туевой кучей функций и скриптов и я код упростил раз в 10, чтобы воспроизвести проблему?
так а в чем собственно принципиальная разница, когда товар простой и вариативный, когда в первом случае все подгружается верно, а во втором нет?
и как с динамическим контентом разной высоты можно работать с помощью css в данном случае?

Надо вам добавить в функцию динамической подгрузки, в конец, вызов той функции, что отвечает за позиционирование, чтоб она каждый раз считала заново.

что добавить - скрипт добавить в функцию php?

[ligisayan]

Aetae Есть в интернет-магазине форма, которая устанавливает стоимость товара в зависимости от выбранных пользователем атрибутов.

Мне нужно обратиться к блоку с классом price и поменять его месторасположение (в зависимости от условия). Проблема в том, что если смотреть через консоль, то видно, что <span class="price"><span class="amount">260.000&nbsp;руб.</span> формируется через атрибут data-product_variations самой формы, т.е. блок, в котором он формируется <div class="single_variation"></div> - пустой, а если смотреть html-код страницы, то он там есть. Вопрос: как обратиться мне к блоку с классом .price, чтобы в дальнейшем с ним манипулировать? Как вы могли заметить - такой строчкой $this.find('.price') этого не получается сделать.

$('.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");
	}
	});

<!-- То, что видно в скрипте через консоль-->
<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 {
  position: relative;
}
.product-frame .price {
  position: absolute;
  top: 379px;
  left: 10px;
}