如何提取子元素href并为父元素添加带链接的覆盖层？

初始HTML结构 #

<div class="outside">
<div class="container">
<a href="link1"></a>
</div>
</div>

<div class="outside">
<div class="container">
<a href="link2"></a>
</div>
</div>

<div class="outside">
<div class="container">
<a href="link3"></a>
</div>
</div>

期望实现效果 #

<div class="outside">
<a href="link1" class="overlay">
<div class="container">
<a href="link1"></a>
</div>
</a>
</div>

<div class="outside">
<a href="link2" class="overlay">
<div class="container">
<a href="link2"></a>
</div>
</a>
</div>

<div class="outside">
<a href="link3" class="overlay">
<div class="container">
<a href="link3"></a>
</div>
</a>
</div>

可行解决方案 #

直接遍历每个.outside容器，在遍历过程中获取当前容器内的目标链接，再完成包裹操作：

$('.outside').each(function() {
  // 获取当前容器内的链接地址
  const targetHref = $(this).find('.container a').attr('href');
  // 用带指定属性的a标签包裹内部内容
  $(this).wrapInner(`<a href="${targetHref}" class="overlay"></a>`);
});

方案说明 #

• 不需要额外维护数组，通过$(this).find()精准定位当前容器内的链接，确保每个.outside对应正确的href值
• 使用ES6模板字符串拼接HTML，语法更简洁，避免字符串拼接的引号转义问题
• 自动为包裹的a标签添加overlay类，完全匹配需求结构
• 支持任意数量的.outside/.container元素，遍历逻辑会自动处理每一个容器

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