Wrap div around 2 sequential elements in jQuery

Question

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>

Answer 1

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.