jquery - Cannot wrap divs correctly with nextUntil()

Question

I have the following HTML. I have tried the following, but I can't wrap the elements correctly.

$('.cards .card-image').each(function() {
  $(this).nextUntil(".card-description").addBack().wrapAll("<div class='card'></div>");
});

<div class="cards">
  <img class="card-image" src="...">
  <img class="card-image" src="...">
  <img class="card-image" src="...">
  <div class="card-description">
    <p>First image description</p>
  </div>
  <div class="card-description">
    <p>Second image description</p>
  </div>
  <div class="card-description">
    <p>Third image description</p>
  </div>
</div>

question from:https://stackoverflow.com/questions/65617186/cannot-wrap-divs-correctly-with-nextuntil

Answer 1

Unfortunately nextUntil() won't work in this case as the .card-image and card-description elements are not adjacent siblings.

To work around this you can instead loop through all the .card-image elements, appending them to a new .card div along with the relevant .card-description which matches the index of the current image. Try this:

let $cards = $('.cards');
let $descriptions = $('.card-description');
$cards.children('.card-image').each(function(i) {
  let $card = $('<div class="card" />').appendTo($cards);
  $card.append(this, $descriptions.eq(i));
});

.card { border: 1px solid #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <img class="card-image" src="..." />
  <img class="card-image" src="..." />
  <img class="card-image" src="..." />
  <div class="card-description">
    <p>First image description</p>
  </div>
  <div class="card-description">
    <p>Second image description</p>
  </div>
  <div class="card-description">
    <p>Third image description</p>
  </div>
</div>