javascript - 如何将一个 anchor 的href链接复制到其他 anchor ？

Question

我正在 WordPress 中通过简码展示一组产品。显示屏上有图像和按钮。

问题:只有照片包含指向单个产品页面的链接。关联的按钮没有指向单个产品页面的链接。

这是当前代码:

<div class="display-products">
    <div class="wpb_wrapper">
        <div class="displayProduct-shortcode displayProduct-Container">
            <div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
                <div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
                    <div class="dp_images">
                        <a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
                            <div class="he-wrap tpl1">
                                <div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
                            </div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
                    </div>
                    <div class="dp-product-information clearfix">
                        <h2 class="product-name">
                                <a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>

                            </h2>
                        <div class="dp-stock"></div>
                        <div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

期望的输出:我想以某种方式迭代每个.single_add_to_cart_button并将每个产品名称的链接复制到每个阅读更多按钮

这是我当前的 jquery 代码:

j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
    var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
    j(this).attr('href', getProductLink);
});

Answer 1

使用元素上下文设置 href 属性值。使用 closest() 遍历到 dp-product-information 元素，然后找到所需的 anchor 元素，读取其属性并设置值。

使用

j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
    return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});

$(function() {
  $('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
    return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
  <h2 class="product-name">
                            <a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>

                        </h2>

  <div class="dp-stock"></div>
  <div class="dp-grid-button">
    <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
  </div>
  <div style="clear: both;"></div>
</div>