jQuery修改media-url锚点href为field__item内锚点URL时出现undefined问题排查

我需要将带有media-url类的<a>标签的href属性值，替换为field__item类div内最近的<a>标签的URL，但执行代码后返回undefined，请帮忙排查错误。

相关HTML结构 #

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

错误原因 #

你使用的.find('.field__item a')是查找media-url元素的后代节点，但从HTML结构可以看到，media-url所在的<a>标签和field__item所在的div属于同级的兄弟结构（不在同一个父容器内），因此无法通过find()找到目标元素，最终返回undefined。

修复方案 #

场景1：页面只有一组该结构

直接定位目标URL元素，再替换media-url的href：

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

场景2：页面有多个该结构（需对应替换）

如果页面存在多组媒体模块和内容模块，需要遍历每组进行对应替换：

// 遍历每个媒体模块
$('.media').each(function() {
  // 找到当前媒体模块相邻的内容模块中的目标URL
  let targetUrl = $(this).next('.component-spotlight__inner').find('.field__item a').attr('href');
  // 替换当前模块内media-url的href
  $(this).find('.media-url').attr('href', targetUrl);
});

内容的提问来源于stack exchange，提问作者vyshnavi