如何使用 jquery 中的特定 div 用最近的錨標簽 url 更改當前錨標簽 href

Question

嗨，我正在嘗試使用 class 媒體 URL 更改錨標簽href，其中最近的錨標簽 url 在 field__item div 內，但我越來越不確定，請讓我知道我在哪里做錯了。

  <div class="media media--blazy media--bundle--image media--image media--responsive is-b-loaded">        <a class="media-url" href="https://examplelist/item.com" target="_blank" rel="noopener nofollow noreferrer">
</a>
</div>

<div class="component-spotlight__inner">         
<header class="component-spotlight__title">
            <h2 class="component-spotlight__title-inner">Group Exercise Programs</h2>
            <h4 class="component-spotlight__eyebrow"></h4>
          </header>
 <div class="component-spotlight__content">
  <div class="field field--name-field-media field--type-link field--label-visually_hidden">
    <div class="image-url field__label visually-hidden">media image url</div>
              <div class="field__item"><a href="https://www.example.com/" target="_blank" rel="noopener nofollow noreferrer">https://www.example.com/</a></div>
     </div>
     </div>
     </div>

這是我的 jquery：

  let mediaimageurl = $('.media-url').find('.field__item a').attr('href');
  $('.media-url').attr('href' , mediaimageurl);
    

Answer 1

您需要使用最接近（）來獲取父容器，然后使用next()來獲取.component-spotlight__inner ，最后使用find()來獲取鏈接的容器。

 let mediaimageurl = $('.media-url').closest('.media--bundle--image').next('.component-spotlight__inner').find('.field__item a').attr('href'); $('.media-url').attr('href', mediaimageurl); console.log(mediaimageurl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="media media--blazy media--bundle--image media--image media--responsive is-b-loaded"> <a class="media-url" href="https://examplelist/item.com" target="_blank" rel="noopener nofollow noreferrer"> </a> </div> <div class="component-spotlight__inner"> <header class="component-spotlight__title"> <h2 class="component-spotlight__title-inner">Group Exercise Programs</h2> <h4 class="component-spotlight__eyebrow"></h4> </header> <div class="component-spotlight__content"> <div class="field field--name-field-media field--type-link field--label-visually_hidden"> <div class="image-url field__label visually-hidden">media image url</div> <div class="field__item"><a href="https://www.example.com/" target="_blank" rel="noopener nofollow noreferrer">https://www.example.com/</a></div> </div> </div> </div>