Оборачивание содержимого в якоре в два элемента (включая текстовый узел)

Question

Я пытаюсь обернуть содержимое внутри тега <a> в два деления, используя JQuery.

Например, у меня есть следующая разметка:

<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>

Однако, с моим текущим подходом:

• column__content рендерится только один раз. У меня есть несколько column__item div на моей странице, но column__content рендерится только на первом column__item экземпляре.
• ALL span теги из column__item попадают в этот единственный column__content div.

Ток JQuery:

$('.column.features .column__item a > img').wrapAll('<div class="column__image"></div>');
$('.column.features .column__item a > span').wrapAll('<div class="column__content"></div>');

Answer 1

$('.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>

Я не смог заставить wrapAll работать после фильтрации изображения. Он продолжал игнорировать текстовый узел. Чтобы обойти это, я обернул все с помощью содержимого div, а затем сделал изображение div и переместил изображение из содержимого div в него.