javascript - 根据父元素和/或类用新元素包裹元素

Question

我有三个不同的 div 类:design-box-triple、double 和 single。有多个具有不同类别的 div，它们都是 float 的以响应。

<div class="collageWidgets">
    <div class="design-box-double"></div> <!--width 50%-->
    <div class="design-box-triple"></div> <!--width 33%-->
    <div class="design-box-triple"></div> <!--width 33%-->
    <div class="design-box-triple"></div> <!--width 33%-->
    <div class="design-box-double"></div> <!--width 50%-->
    <div class="design-box-double"></div> <!--width 50%-->
    <div class="design-box-single"></div> <!--width 100%-->
    <div class="design-box-single"></div> <!--width 100%-->
</div>

我想要的是使用 jQuery 来检查 div 是否具有特定条件的类，然后用 div 行换行，使其宽度为 100%，并且 float:left div 保持视觉上的美观，并且不会破坏 div 的流程漂浮。

最终结果示例:

<div class="collageWidgets">
  <div class="row"> <!--width 100%-->
     <div class="design-box-double"></div> <!--width 50%-->
  </div>
  <div class="row"> <!--width 100%-->
     <div class="design-box-triple"></div> <!--width 33%-->
     <div class="design-box-triple"></div> <!--width 33%-->
     <div class="design-box-triple"></div> <!--width 33%-->
  </div>
  <div class="row"> <!--width 100%-->
     <div class="design-box-double"></div> <!--width 50%-->
     <div class="design-box-double"></div> <!--width 50%-->
  </div>
  <div class="row"><!--width 100%-->
     <div class="design-box-single"></div> <!--width 100%-->
  </div>
  <div class="row"><!--width 100%-->
     <div class="design-box-single"></div> <!--width 100%-->
  </div>
  <div class="row"> <!--width 100%-->
     <div class="design-box-triple"></div> <!--width 33%-->
     <div class="design-box-triple"></div> <!--width 33%-->
     <!-- Example missing triple, but won't look messed up because it is wrapped with a row 100% width, display block, and clearfix-->
  </div>
</div><!--End of Collage Widget Div-->

这是我拥有的双重和单一工作的 jQuery。 我在三重代码上苦苦挣扎。带有 design-box-triple 的 div。

这是我的逻辑思维:

我需要检查前一个对象父对象是否有 class="row"&& div 是否有类 design-box-triple。如果是，则将具有设计框三重的第一个小部件推送到数组中。然后检查下一个对象是否具有 design-box-triple 类，如果没有，则将三重小部件包装在 div class = row 中。然后我需要检查第一个类是否有 design-box-triple，下一个类是否有 design-box-triple，然后下一个类是否有 design-box-triple 将所有内容包装在 div class = row 中。但是，如果只有两个彼此相邻且具有类 design-box-triple 的 div，则将其排成一行。

这是我的代码:

(function() {
var widgetArray = $(".careerCollageWidgets").find(".career-widget");
var prevClass = '';
var prevObject = '';
var prevPrevObject = '';
var tripleArray = [];
console.log(widgetArray.length);

$(widgetArray).each(function(index, value){
    console.log($(this));
    var widget = $(this);
    if (widget.hasClass('design-box-single')){
        widget.wrapAll('<div class="row"></div>');
        prevClass = 'design-box-single';
    } else if (widget.hasClass('design-box-double')){

        if(prevClass == 'design-box-double' && !prevObject.parent().hasClass('row')) {
            //var previousArray = [prevObject, widget];
            prevObject.add(widget).wrapAll('<div class="row"></div>');
        } else if (!widget.next().hasClass('design-box-double')){
            widget.wrapAll('<div class="row"></div>');
        }

        prevClass = 'design-box-double';

    } else if (widget.hasClass('design-box-triple')){
        tripleArray.push(widget);
        if (!prevObject.parent().hasClass('row')){
            tripleArray.push(widget);

            console.log(tripleArray);
            console.log("tripleArray");
            //tripleArray.wrap('<div class="row"></div>');
        }
        //else if(prevClass == 'design-box-triple' && !prevObject.parent().hasClass('row')) {

        //  if (!widget.next().hasClass('design-box-triple')){
        //      prevObject.add(widget).wrapAll('<div class="row"></div>');
        //  }

        //} 
        //else if (!widget.next().hasClass('design-box-triple')){
        //  widget.wrapAll('<div class="row"></div>');
        //}
        prevClass = 'design-box-triple';
    }

    prevObject = widget;
});

})();

$('.row').css({'width':'100%', 'display':'block'});
$('.row').addClass('clearfix');

Answer 1

http://jsfiddle.net/isherwood/7jpy4/

$('.single').wrap('<div class="row"></div>');

var doubles = $('.double');
for (var i=0; i<doubles.length;) {
   i += doubles.eq(i).nextUntil(':not(.double)').andSelf()
       .wrapAll('<div class="row"></div>').length;
}

var triples = $('.triple');
for (var i=0; i<triples.length;) {
   i += triples.eq(i).nextUntil(':not(.triple)').andSelf()
       .wrapAll('<div class="row"></div>').length;
}

请注意，我分解了您的类名以简化此演示的内容。另外，如果您分别连续超过两个或三个，则必须放置一个计数器以防止双倍和三倍的堆叠。

灵感来自this question .