Javascript 要在使用jquery生成图像之前移动我的价格吗
我试图将我的Javascript 要在使用jquery生成图像之前移动我的价格吗,javascript,html,jquery,Javascript,Html,Jquery,我试图将我的priceclass div移到图像之前。为此，我尝试了jquery代码，但没有成功。我有一个产品列表，所以不能只使用简单的类引用。因为这个代码在一个地方显示所有的价格。我想显示每张图片上面都有单独的价格，但在我的例子中，它在一个地方显示所有的价格。谢谢 Mhy代码： <script type="text/javascript"> require(['jquery'], function($){ jQuery(document).
price图像之前。为此，我尝试了jquery代码，但没有成功。我有一个产品列表，所以不能只使用简单的类引用。因为这个代码在一个地方显示所有的价格。我想显示每张图片上面都有单独的价格，但在我的例子中，它在一个地方显示所有的价格。谢谢
Mhy代码：
<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>
require（['jquery']，函数（$）{
jQuery（文档）.ready（函数（）{
var i=1；
$（“部门产品项”）。每个（功能（索引）{
//log（index+”：“+$（this.text（））；
$（this）.closest（“.product item img”）.insertBefore（“.product item img”）；
i++；
});
});
});
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>
低至
$52.50
正常价格
$75.00
(-30.00%)
低至
$59.50
正常价格
$85.00
(-30.00%)
closest（）
查找树，您希望find（）
查看内部，您还需要隔离项目中的特定图像
尝试以下方法：
$( "div.product-item" ).each(function( index ) {
const $img = $(this).find(".product-item-img" )
$(this).find(".price").insertBefore($img );
});
请您也添加相关的HTML部分好吗？@AlwaysHelping我已经添加了HTML代码。但是此代码重复只会更改图像和其他产品详细信息。您有多个价格类要移动所有，其中只有一个span=>-30%
？是的，但顶部div.I下还有其他价格类只想移动直接位于价格框下的价格，就像.price box>.price
那样。如果你看到HTML，你会发现价格包装器的价格类也存在。所以只想移动-30%
-正确吗？@Itay是的。。。复制了选择器，甚至没有看它们上面的代码移动所有的价格类顶部。我只想移动特定的price类。你可以在顶部看到我的评论以了解详细信息。缩小html以仅显示相关内容，并对其进行格式化。不太清楚您需要什么通过这样更改类得到了解决方案：$（this.find（.price box>.price”）.insertBefore（$img）