如何使用 jquery 中的特定 div 用最近的锚标签 url 更改当前锚标签 href

Question

Hii i am trying to change the anchor tag href with class media-url with the nearest anchor tage url which is inside field__item div, but i am getting undefined, please let me know where i am doing wrong.

  <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>

here is my jquery:

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

Answer 1

You need to use closest() to get the parent container and then next() to get .component-spotlight__inner and finally use find() to get the container of your link.

 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>