使用 JQuery 将内容包装在两个 div 中的标签中 [重复]

Question

我正在尝试使用 jQuery 将标签内的内容包装到两个 div 中。例如，我有以下标记：

<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
  </div>
</div>

我想要实现的是：

<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        <div class="column__content">
          Text
          <span>Subtext</span>
        </div>
        <div class="column__image">
          <img src="image.jpg">
        </div>
      </a>
    </div>
  </div>
</div>

我目前的方法可以完成这项工作，但在 IE11 中不起作用：

$('.column__item a').each((i, e) => {
  const $link = $(e);
  $link.contents().wrapAll('<div class="column__content">');
  $link.append($('<div class="column__image">').append($link.find('img')));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
  </div>
</div>

我收到语法错误。我正在寻找一种更支持跨浏览器的方法。

Answer 1

这里的问题是你的箭头功能，IE 11 不支持。只需像这样重写它：

$('.column__item a').each(function(i, e) {
    const $link = $(e);
    $link.contents().wrapAll('<div class="column__content">');
    $link.append($('<div class="column__image">').append($link.find('img')));
  });