[英]jQuery script to collect a link, wrap it around an image, and repeat for the next div
我正在為我正在使用的移動購物車應用一些jQuery。 每個產品與類產品一起包裝在div中。 在每種產品中,縮略圖和詳細信息都有單獨的div。 我想收集div類動作中的第一個鏈接,並將其包裝在縮略圖上。 然后,我希望對下一個產品重復該操作,依此類推。 謝謝。
這是一些顯示產品流的示例html:
<div class="product"> <div class="product-thumb"><img src="/product1.jpg"></div> <div class="product-details"> <p>Product1</p> <div class="amount"> <span class="price" id="product_price">$1.00</span> </div> <div class="actions"> <a href="http://madeuplinktoproduct1detailspage"><img alt="Details" src="../images/details.png"></a> <a href="http://madeuplinktoproduct1cartpage"><img alt="Add to Cart" src="../images/btn-add-to-cart.png"></a> </div> </div> </div> <div class="product"> <div class="product-thumb"><img src="/product2.jpg"></div> <div class="product-details"> <p>Product2</p> <div class="amount"> <span class="price" id="product_price">$2.00</span> </div> <div class="actions"> <a href="http://madeuplinktoproduct2detailspage"><img alt="Details" src="../images/details.png"></a> <a href="http://madeuplinktoproduct2cartpage"><img alt="Add to Cart" src="../images/btn-add-to-cart.png"></a> </div> </div> </div>
我試過這樣的代碼:
$(document).ready(function() { var link1 = $('.actions a:nth-child(1)').attr('href'); $('product-thumb img').wrap('<a href="' $link1 '"></a>); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product"> <div class="product-thumb"><img src="/product1.jpg"></div> <div class="product-details"> <p>Product1</p> <div class="amount"> <span class="price" id="product_price">$1.00</span> </div> <div class="actions"> <a href="http://madeuplinktoproduct1detailspage"><img alt="Details" src="../images/details.png"></a> <a href="http://madeuplinktoproduct1cartpage"><img alt="Add to Cart" src="../images/btn-add-to-cart.png"></a> </div> </div> </div> <div class="product"> <div class="product-thumb"><img src="/product2.jpg"></div> <div class="product-details"> <p>Product2</p> <div class="amount"> <span class="price" id="product_price">$2.00</span> </div> <div class="actions"> <a href="http://madeuplinktoproduct2detailspage"><img alt="Details" src="../images/details.png"></a> <a href="http://madeuplinktoproduct2cartpage"><img alt="Add to Cart" src="../images/btn-add-to-cart.png"></a> </div> </div> </div>
您可以通過以下兩種方式進行操作:
$('div.product').each(function(){
var link = $(this).find('div.actions a:first').attr('href');
$(this).find('div.product-thumb img').wrap('<a href="'+link+'"/>')
})
和
$('div.product-thumb img').wrap(function(){
return '<a href="' + $(this).parent().next().find('div.actions a:first').attr('href') + '"/>'
})
這應該做
$('.product').each(function(){
$(this).find('.product-thumb img').wrap('<a href="' + $(this).find('.actions a:first').attr('href') +'">');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.