将每两个div包装在一个div内的each循环中
将每两个div包装在一个div内的each循环中
提问于 2015-09-03 07:57:54
客户正在使用visual composer创建一个元素网格，他有3行，每行4列，他打算在未来添加更多的行，所以他想让我创建一个滑块，在每张幻灯片上只显示2行4列(响应在移动设备上只显示1列，但这是另一回事)
无论如何，我使用each循环从3行中获取所有div，并将它们插入到单个滑块div中。im遇到麻烦的部分是将每2个div包装到一个div中，以创建两行，然后我将浮点每一行，以创建4列。
这是我到目前为止所拥有的
$.each( $('.slidergrid'), function(i, left) {
count = 0;
$('.wf-span-3', left).each(function() {
var content = $(this).html();
if (count == 1) {
$('#slider').append(content+'</div>');
alert(count);
count = 0;
} else {
$('#slider').append('<div style="border:1px solid #ccc">'+content);
alert(count);
count = count + 1;
}
});
})这不是最好的解决方案，但是我尝试使用了我在这里找到的切片函数，并且一直收到没有定义切片之类的未捕获的错误。.slidergrid是我添加到可视化编写器行中的类，以便能够针对它们。#slider是幻灯片的div。
由于某种原因，上面的代码在边框内输出一个元素，在边框外的div上输出一个元素，在边框内输出一个div元素，在外部输出一个div元素，等等。
任何帮助都将不胜感激。
添加了一个Jsfiddle https://jsfiddle.net/Ldh2v1nj/
编辑:我能够让它工作，但它有点臃肿，必须经过两个循环，我希望有人能为我重构它？
function grabElements(){
$.each( $('.slidergrid'), function(i, left) {
$('.wf-span-3', left).each(function() {
var content = $(this).html();
$('#slider').append('<div class="slideshow_item" >'+content+'</div>');
});
})
}
function wrapElements(){
var divs = $("#slider > .slideshow_item");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div style='width:23%; padding:1%; float:left;'></div>");
}
}
$.when($.ajax(grabElements())).then(function () {
wrapElements()
});Stack Overflow用户
发布于 2015-09-03 08:04:44
使用Chromes开发人员工具或Firefox的firebug检查输出上的样式。如果你的任何‘内容’是浮动的，它将弹出你的边界。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32364995
复制相关文章
相似问题
腾讯云开发者
