jQuery 脚本，用于收集 link，将其包裹在图像周围，并为下一个 div 重复

Question

我想为我正在使用的移动购物车应用一些 jquery。每个产品都包装在 div 和 class 产品中。在每个产品中，缩略图和详细信息都有一个单独的 div。我想收集 div class 操作中的第一个 link 并将其环绕在缩略图图像周围。然后我希望它对下一个产品重复，依此类推。谢谢。

这里有一些示例 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">.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">.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">.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">.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>

Answer 1

您可以通过以下两种方式完成此操作：

$('div.product').each(function(){
    var link = $(this).find('div.actions a:first').attr('href');
    $(this).find('div.product-thumb img').wrap('<a href="'+link+'"/>')
})

jsFiddle example

和

$('div.product-thumb img').wrap(function(){
    return '<a href="' + $(this).parent().next().find('div.actions a:first').attr('href') + '"/>'
})

jsFiddle example

Answer 2

应该这样做

$('.product').each(function(){
    $(this).find('.product-thumb img').wrap('<a href="' + $(this).find('.actions a:first').attr('href') +'">');        
});

jQuery 脚本，用于收集 link，将其包裹在图像周围，并为下一个 div 重复

jQuery script to collect a link, wrap it around an image, and repeat for the next div

html

javascript

jquery

jquery-wrap