使用jQuery将三个重复的div组合并为一个 [英] Wrap three repeating div groups into one using jQuery

问题描述

我在这里还有另一个问题.我有几个重复的div组.一组中有3个具有不同类别的divs.

I have another problem here. I have few repeating groups of divs. There is 3 divs with different classes in one group.

我需要做的是将其包装到一个容器"中.当我使用wrapAll时，它会将所有内容包装到一个div中.

What I need to do is wrap the into one 'container'. When I'm using wrapAll it wraps all into one div.

这是我的html:

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

这一切都在一个身体里.

This is all in one body.

作为结果，我希望它们看起来像这样:

As I result i would like to have them look like this:

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

谢谢您的帮助

推荐答案

我刚刚为此写了插件

(function($){

   $.fn.wrapChildren = function(options) {

    var options = $.extend({
                              childElem : undefined,
                              sets : 1,
                              wrapper : 'div'
                            }, options || {});
    if (options.childElem === undefined) return this;

 return this.each(function() {
  var elems = $(this).children(options.childElem);
  var arr = [];

  elems.each(function(i,value) {
    arr.push(value);
    if (((i + 1) % options.sets === 0) || (i === elems.length -1))
   {
     var set = $(arr);
     arr = [];
     set.wrapAll($("<" + options.wrapper + ">"));
   }
  });
    });

  }

})(jQuery);

您传入一个选项对象定义

You pass in an options object defining

• childElem-要包装的直接子级的过滤器选择器
• sets-如何对子元素进行分组.例如，您的情况下为3套.默认值为1
• wrapper-用于包装子元素的元素.默认为<div>

对数据使用类似的用法.您需要为div定义一个父元素

Use like so on your data. You need to define a parent element for the divs

$(function() {   
  $('body').wrapChildren({ 
             childElem : 'div.bb_box_tl, div.bb_box_l, div.bb_box_lb' , 
             sets: 3, 
             wrapper: 'div class="box-cont"'
  });   
});

这是一个> 工作演示 ，其中包含一些数据.

Here's a Working Demo with some data.

更新:

我写了一篇博客文章，内容涉及

这篇关于使用jQuery将三个重复的div组合并为一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！