如何使用jQuery在包装的标签中设置子元素的href属性?

时间:2018-11-22 14:48:11

标签: javascript jquery html

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

到目前为止,这是我找到的所有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>

1 个答案:

答案 0 :(得分:0)

正如您在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>