在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对象中的每个元素。

Answer 2

 var divs = $('dt, dd'); for(var i = 0; i < divs.length; i+=2) { divs.slice(i, i+2).wrapAll("<div class='variation'></div>"); } 

 .variation{ border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <dt class="variationTitle"> Title </dt> <dd class="variationName"> Name </dd> <dt class="variationTitle"> Title </dt> <dd class="variationName"> Name </dd> 

Answer 3

我不是在电脑上所以不能测试这个，但我认为这样可行：

  var $set = $('#parentcontainer').children();    
  for(var i=0, len = $set.length; i < len; i+=2){
        $set.slice(i, i+2).wrapAll('<div class="variation"/>');
  }    

希望你有一个包含你的dt / dd元素的父元素。