根据父元素和/或类,用新元素包裹元素
Wrap elements with new element depending on parent and/or class
我有三个不同的div类:design-box-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="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%的宽度和浮动:左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。我在三重代码上挣扎。div with design-box-triple.
这是我的逻辑思维:
我需要检查前一个对象父类是否有class="row" &&如果div有design_box_triple类。如果是,则将第一个具有design-box-triple的小部件推入数组。然后检查下一个对象是否具有design-box-triple类,如果没有,则在div class = row中包装三重小部件。然后,我需要检查第一个类是否有design-box-triple,下一个类是否有design-box-triple,然后下一个类是否有design-box-triple,然后再下一个类是否有design-box-triple,将它们全部包装在div class = row中。但如果只有两个class 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');
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;
}
注意,为了简化演示,我把类名分开了。此外,如果你有超过两个或三个连续的双精度和三元组,你必须放入一个计数器来防止堆栈。
来自这个问题的灵感
相关文章:
- 触摸移动时切换到新元素
- 将按钮添加到新元素中
- 如何在javascript上向数组的对象添加新元素
- 如果数组仍在执行,async.forEach()将运行我添加到数组中的新元素
- 剑道UI下载列表:如何动态添加新元素
- 在DIV中动态插入HTML并访问新元素
- 使一个新元素在某个时间出现
- 单击不适用于新元素
- 动态添加新元素并更改其内容
- 没有为Ajax添加的新元素注册Jquery事件
- css在新元素上的转换
- 如何在不创建新元素的情况下修改 DOM 元素的位置
- jquery添加新元素
- 如何在遍历表和添加新元素时获得tr的索引
- PNG修复新元素
- 将点击事件绑定到新元素&使得ID'是独一无二的
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- jQuery没有为具有新id的新元素执行代码
- jQuery倒计时-应用于通过AJAX/PHP加载的新元素
- 在元素内部创建新元素