Question

我有一个带有锚标签的div。我需要使用与jQuery使用子div相同的href来用锚标签包装整个div。

<div class="parent-div">
  <div class="child-div">
     <h3><a href="example.com">MORE INFORMATION</a></h3>
  </div>
</div>

Expected output:

<a href="example.com" target="_blank">
<div class="parent-div">
  <div class="child-div">
     <h3><a href="example.com">MORE INFORMATION</a></h3>
  </div>
</div>
</a>

Answer 1

您可以使用.wrap()功能，如下所示 For More Information on Wrap

$(function(){
  var $anchor = $('div.parent-div a').clone();//clone existing anchor
  $anchor.text('');//remove text
  $anchor.attr('target','_blank');
  $('div.parent-div').wrap($anchor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div">
  <div class="child-div">
     <h3><a href="example.com">MORE INFORMATION</a></h3>
  </div>
</div>

Answer 2

如果您不想使用wrap函数并且要使用常见的jQuery函数，请尝试以下操作：

;(function(p){
    $("<a target='_blank' href='"+p.find("a").attr("href")+"'></a>").insertBefore(p).append(p);
})($(".parent-div"));

但是嵌套锚点无效。为了解决这个问题，您可以更新上述类似的代码：

 ;(function(p){
    var a=p.find("a");
    $("<a target='_blank' href='"+a.attr("href")+"'></a>").insertBefore(p).append(p);
    $("span").insertBefore(a).html(a.html());
    a.remove();
  })($(".parent-div"));

将锚标记包裹在父元素周围

2 个答案: