Wrap div around 2 sequential elements in jQuery

I have repeating elements like this:

<dt class="variationTitle">
Title
</dt>
<dd class="variationName">
Name
</dd>
<dt class="variationTitle">
Title
</dt>
<dd class="variationName">
Name
</dd>

It’s a dt tag followed by a dd tag, unfortunately I can’t change the HTML directly, but I need to wrap a <div class="variation"> around the title and name so it looks like this:

<div class="variation">
  <dt class="variationTitle">
  Title
  </dt>
  <dd class="variationName">
  Name
  </dd>
  </div>
  <div class="variation">
  <dt class="variationTitle">
  Title
  </dt>
  <dd class="variationName">
  Name
  </dd>
</div>

solution

One option would be to iterative over each dt element and then select the adjacent dd element and wrap them both using the .wrapAll() method:

$('dt').each(function() {
  $(this).add($(this).next('dd')).wrapAll('<div class="variation"></div>')
});

It works because $(this) is the current dt element, and .add() will add the next dd element to the jQuery object, and .wrapAll() will wrap each element in the jQuery object.