使用断点调整调整大小函数的功能

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。如果屏幕尺寸小于1224像素，则每隔两个包装一次，否则将每三个包装一次。

我有这个工作，使用调整大小功能，并建立了一个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/