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() method将它们包装起来：

$('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元素的父元素。

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

3 个答案: