如何使用 jquery 在包装标签中设置子元素的 href 属性？答案

【问题标题】：How to set href attribute of child in wrapped tag using jquery?如何使用 jquery 在包装标签中设置子元素的 href 属性？
【发布时间】：2018-11-22 23:10:52
【问题描述】：

所以我有 3 个名为 wrapper1 的 div。里面有wrapper 2。里面有一些文字和一个按钮。问题是：如何从按钮中获取 href，在包装 2 周围添加 a 标签并将 href 添加到 a 标签。

这是我目前所拥有的，找到所有wrapper1，在wrapper2 周围添加一个标签。但我不明白如何读写href。

最终结果应该是

<div class="wrapper1">
  <a href="http://www.ipsum.de">
    <div class="wrapper2">
      <p>content</p>
      <a href="http://www.ipsum.de">button</a>
    </div>
  </a>
</div>

jQuery(function($) {
  $('.wrapper1 .wrapper2').wrap('<a class="lorem" href="???"a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper1">
  <div class="wrapper2">
    <p>content</p>
    <a href="http://www.ipsum.de">button</a>
  </div>
</div>

【问题讨论】：

jsfiddle.net/khrismuc/jqksp4xn
您不能将所有这些都包装在一个锚中，因为您将拥有一个无效的嵌套锚 - 而不是使用包装器 1 的 window.location onclick 来重定向到链接 href

标签： javascript jquery html

【解决方案1】：

正如您在question 中看到的，在 html 中使用嵌套的锚标记是无效的。

使用.wrap( function )，允许您在回调函数中修改包装的标签内容。

$('.wrapper1 .wrapper2').wrap(function(){
  return '<a href="'+$(this).find('a').remove().attr('href')+'"></a>';
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper1">
  <div class="wrapper2">
    <p>content</p>
    <a href="http://www.ipsum.de">button</a>
  </div>
</div>

【讨论】：