javascript - 将整个 div 包含在 <a> 中

Question

我有一个 div，我想用 <a href> 包围它.我有 jQuery 来添加 <a href>在 div 之后，但我很难在 div 之前设置它并在 div 之后关闭它。

这是我的 jQuery 代码:

$('.box_service').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com"></a>');
});

它的结果是这个 HTML:

<div class="row">
  <div class="box_service">
    <a href="example.com">
      <div class="inner-row"></div>
    </a>
  </div>
</div>

但是我的目标是这个结构:

<div class="row">
  <a href="example.com">
    <div class="box_service">
      <div class="inner-row"></div>
    </div>
  </a>
</div>

我之前无法输入 div，因为这一行中有更多框，所以我会添加 <a href>那里的一切

Answer 1

问题是由于您对 contents() 的调用，这意味着您将元素包装在 inside .box_service 中，而不是那个元素本身。删除该方法调用。

另请注意，each() 是多余的，您可以在一行中执行所需的操作:

$('.box_service').wrap('<a href="example.com"></a>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="box_service">
    Box service #1
    <div class="inner-row">Inner row #1</div>
  </div>
</div>

<div class="row">
  <div class="box_service">
    Box service #2
    <div class="inner-row">Inner row #2</div>
  </div>
</div>