在jQuery中包含2个连续元素的div

Question

我有这样的重复元素:

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

它是一个dt标签,后跟一个dd标签,遗憾的是我不能直接更改HTML,但我需要包围<div class="variation">标题和名称,所以它看起来像这样:

<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

一种选择是迭代每个dt元素,然后选择相邻dd元素并使用以下.wrapAll()方法将它们包装起来:

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

它的工作原理是因为$(this)当前dt元素,并将.add()下一个dd元素添加到jQuery对象,并将.wrapAll()每个元素包装在jQuery对象中.