0

私が使用しているモバイルショッピングカートに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>

4

2 に答える 2

0

これでできるはず

$('.product').each(function(){
    $(this).find('.product-thumb img').wrap('<a href="' + $(this).find('.actions a:first').attr('href') +'">');        
});
于 2015-04-10T16:57:51.447 に答える