Question

我在一行div上设置了一些JS / jQuery。它包含div .each-row中的每三个元素。

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

变为

<div class="each-row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="each-row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

我正在使用的JS代码是：

// Get all the .bricks
var brick = $('.container .brick');
// Loop through all the .bricks
for (var i = 0; i < brick.length; i += 3) {
    // Create container
    var brickContainer = $('<div />', {
        class: 'each-row'
    });
    // Wrap all the .bricks inside the container
    brick.slice(i, i + 3).wrapAll(brickContainer);
}

工作非常成功，但我想在这里添加几个断点，所以如果屏幕大小为767px或更小，它会将.brick中的每个each-row换行。如果屏幕尺寸小于1224px，则每两个包装一次，否则每三个包装一次。

我有这个工作，使用resize函数，并设置了JSfiddle但唯一的问题是，由于调整大小，它在每个像素迭代上注入each-row。如果你在调整jsfiddle的大小时查看DOM，你会发现它一直在添加each-row。

有关如何解决此问题的任何想法？

谢谢， [R

Answer 1

你必须在再次包裹之前解开元素。

function overviewGridResize() {

    $('.each-row').each(function(ind, row){
        $(row) // select the row
            .children()  // take its children
            .detach()  // detach them from row
            .appendTo($(row).parent()); // append them to row's parent
        $(row).remove(); // remove the empty row
    });
    // rest of your code
});

我更新了你的小提琴：http://jsfiddle.net/b2YKZ/4/

使用断点调整大小函数的拼接

1 个答案: