Question

客户端正在使用可视化合成器创建一个元素网格，他有3行，每行有4个列，并且他将来会添加更多行，所以他要我创建一个只显示2行的滑块每张幻灯片上有4列（响应仅在移动设备上显示1列，但这是另一个故事）

无论如何，我使用每个循环，从3行中获取所有div，并将它们插入到单个滑块div中。我遇到麻烦的部分是将每2个div包装成一个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等等。当我期待它一次在边框内输出2个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()
});

Answer 1

使用Chromes开发人员工具或Firefox的firebug检查输出中的样式。如果你有任何内容＆＃39;浮动它将从你的边界弹出。

在div

1 个答案: