如何将每组图像和下一个 div 包装在一个列表中？答案

【问题标题】：How to wrap each group of image and next div in a list?如何将每组图像和下一个 div 包装在一个列表中？
【发布时间】：2016-09-14 14:55:40
【问题描述】：

我想把每组图片和下一个div包装起来，如示例：

<div class="group">

   <img class="slide" src="...">
   <div class="content">...</div>

   <img class="slide" src="...">
   <div class="content">...</div>

   <img class="slide" src="...">
   <div class="content">...</div>

   ...

</div>

到

<div class="group">

   <div class="subgroup">
      <img class="slide" src="...">
      <div class="content">...</div>
   </div>

   <div class="subgroup">
      <img class="slide" src="...">
      <div class="content">...</div>
   </div>

   <div class="subgroup">
      <img class="slide" src="...">
      <div class="content">...</div>
   </div>

   ...

</div>

【问题讨论】：

标签： javascript jquery image next

【解决方案1】：

试试这个

$(".group .slide").each(function(){
    $(this).next(".content").andSelf().wrapAll("<div class='subgroup' />");
});

Working Demo

【讨论】：

andSelf() 在 jquery 1.8 及更高版本中被弃用。但是可以通过addBack()获得相同的功能

【解决方案2】：

您可以获得所有幻灯片和内容元素。然后将返回的数组切片以形成一组元素，然后将其包装在同一组中：

var childelements = $(".group > .slide , .group > .content");
for(var i = 0; i < childelements.length; i+=2) {
  childelements.slice(i, i+2).wrapAll('<div class="subgroup"></div>');
}

Working Demo

【讨论】：