Javascript 根据父元素和/或类使用新元素包装元素
我有三个不同的div类:designbox-triple、double和single。有多个div具有不同的类,它们都是浮动的,以便响应Javascript 根据父元素和/或类使用新元素包装元素,javascript,jquery,Javascript,Jquery,我有三个不同的div类:designbox-triple、double和single。有多个div具有不同的类,它们都是浮动的,以便响应 <div class="collageWidgets"> <div class="design-box-double"></div> <!--width 50%--> <div class="design-box-triple"></div> <!--width 33
<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>
$('.single').wrap('');
var double=$('.double');
对于(var i=0;您正在应用的CSS。行
是div的默认值。不应该是必需的。我添加了.slice(0,3)以选择相同类型的三个连续。
<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-->
(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');
$('.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;
}