#javascript #html #jquery
#javascript #HTML #jquery
Вопрос:
Я пытаюсь переместить свой price класс div перед image . Для этого я пробовал код jquery, но безуспешно. У меня есть список продуктов, поэтому я не могу просто использовать простую ссылку на класс. Потому что этот код показывает все цены в одном месте. Я хочу показать, что у каждого изображения есть отдельные цены выше этого. но в моем случае все цены отображаются в одном месте. Спасибо
Мой код :
<script type="text/javascript">
require(['jquery'], function($){
jQuery(document).ready( function() {
var i =1;
$( "div.product-item" ).each(function( index ) {
// console.log( index ": " $( this ).text() );
$(this ).closest(".product-item-img").insertBefore( ".product-item-img" );
i ;
});
});
});
</script>
Код HMTL :
<div class="items-group">
<div class="products grid">
<div class="item product-item">
<div class="product-item-info">
<div class="product-item-img">
<a href="https://www.example.com/mens/short-sleeve/kuhl-mens-short-sleeve-airspeed-ss.html" class="product photo product-item-photo">
<img class="lazy lazy-blur product-image-photo lazy-loaded" src="https://www.example.com/media/catalog/product/cache/c7587e3bc9758535f28022fdb134c42e/7/1/7194_airspeed_ss_slate_front_1_style_zoom_3.jpg" alt="Airspeed SS" style="display: block;">
</a>
</div> <!-- end: product-item-img -->
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" title="Airspeed SS" href="https://www.example.com/mens/short-sleeve/kuhl-mens-short-sleeve-airspeed-ss.html">
Airspeed SS </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="16031" data-price-box="product-id-16031">
<span class="normal-price">
<span class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span id="product-price-16031" data-price-amount="52.5" data-price-type="finalPrice" class="price-wrapper "><span class="price">$52.50</span></span>
</span>
</span>
<span class="old-price sly-old-price no-display">
<span class="price-container price-final_price tax weee">
<span class="price-label">Regular Price</span>
<span id="old-price-16031" data-price-amount="75" data-price-type="oldPrice" class="price-wrapper "><span class="price">$75.00</span></span>
</span>
</span>
<span class="price">
(-30.00%) </span>
</div>
</div> <!-- end: product-item-details -->
</div> <!-- end: product-item-info -->
</div>
</div>
<div class="products grid">
<div class="item product-item">
<div class="product-item-info">
<div class="product-item-img">
<a href="https://www.example.com/mens/long-sleeve/kuhl-mens-long-sleeve-alloy.html" class="product photo product-item-photo">
<img class="lazy lazy-blur product-image-photo lazy-loaded" src="https://www.example.com/media/catalog/product/cache/c7587e3bc9758535f28022fdb134c42e/3/1/3118_m_alloy_cosmos_lifestyle_style_zoom_1.jpg" alt="Alloy" style="display: block;">
</a>
</div> <!-- end: product-item-img -->
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" title="Alloy" href="https://www.example.com/mens/long-sleeve/kuhl-mens-long-sleeve-alloy.html">
Alloy </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="14640" data-price-box="product-id-14640">
<span class="normal-price">
<span class="price-container price-final_price tax weee">
<span class="price-label">As low as</span>
<span id="product-price-14640" data-price-amount="59.5" data-price-type="finalPrice" class="price-wrapper "><span class="price">$59.50</span></span>
</span>
</span>
<span class="old-price sly-old-price no-display">
<span class="price-container price-final_price tax weee">
<span class="price-label">Regular Price</span>
<span id="old-price-14640" data-price-amount="85" data-price-type="oldPrice" class="price-wrapper "><span class="price">$85.00</span></span>
</span>
</span>
<span class="price">
(-30.00%) </span>
</div>
</div> <!-- end: product-item-details -->
</div> <!-- end: product-item-info -->
</div>
</div>
</div>
Комментарии:
1. Не могли бы вы также добавить соответствующую HTML-часть, пожалуйста?
2. @AlwaysHelping Я добавил HTML-код. Но этот код повторяется, просто изменяет изображение и другие детали продукта.
3. У вас есть несколько
priceклассов, которые вы хотите переместитьallиз них только в тот, у которого есть span =>-30%?4. Да, но есть другие классы цен в верхнем разделе. Я хочу просто переместить цену, которая напрямую относится к
price-boxклассу like.price-box > .price. если вы увидите HTML, вы обнаружите, что класс цен также существует дляprice-wrapperтоже.5. Так что только хотите переместить
-30%— правильно?
Ответ №1:
closest() просматривает дерево, вы хотите find() заглянуть внутрь, и вам также нужно изолировать конкретное изображение внутри элемента
Попробуйте что-то вроде:
$( "div.product-item" ).each(function( index ) {
const $img = $(this).find(".product-item-img" )
$(this).find(".price").insertBefore($img );
});
Комментарии:
1. @Itay Да … скопировал селекторы, даже не взглянув на них
2. Приведенный выше код перемещает все классы цен сверху. Я просто хочу переместить определенный ценовой класс. вы можете увидеть мои комментарии сверху для деталей.
3. Уменьшите размер html, чтобы показывать только то, что имеет отношение к делу, и поэтому оно отформатировано. Не совсем понятно, что вам нужно
4. получил решение, изменив класс следующим образом :
$(this).find(".price-box > .price").insertBefore($img );