响应地包装和解包div [英] Wrap and unwrap divs responsively

问题描述

我有一组6个DIV，我想根据浏览器的屏幕宽度将每个X div包装在一个新的div中。

I have a set of 6 DIVs which I want to wrap in a new div every X divs depending on the screenwidth of the browser.

所以开始我有

<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>

所以在980px以上我要添加一个新的DIV，风格=display：table-row ;到每3个DIV - 从而制作：

So at 980px an above I want to add a new DIV with style="display: table-row;" to every 3 DIVs - thus making:

<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>

然后在400px和979px之间我希望它包装每个第二个div，所以它变为：

Then at between 400px and 979px I want it to wrap every 2nd div so it becomes:

<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
<div class="blogItem"></div>
</div>

然后每1 DIV低于399px，所以它变为：

And then below 399px every 1 DIV, so it becomes:

<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>
<div style="display:table-row;">
<div class="blogItem"></div>
</div>

我该怎么做？

我工作的解决方案在页面加载时运行良好，但在更改浏览器大小时不会更新：

The solution I have worked which works well on page load but does not update when you change the browser size is:

对于980px及以上

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

400 - 979

For 400 - 979

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

低于399

var divs = $(".blogItem");
for(var i = 0; i < divs.length; i+=1) {
  divs.slice(i, i+1).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

所有这些一起被称为：

function blogPadders () {

// read window size
var windowSize = $(window).width();
// set div var for wrapping in rows
var divs = $(".blogItem");

if (windowSize >= 746) {
for(var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

else if (windowSize >= 371 && windowSize <= 745) {
for(var i = 0; i < divs.length; i+=2) {
  divs.slice(i, i+2).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

else if (windowSize <= 370) {
for(var i = 0; i < divs.length; i+=1) {
  divs.slice(i, i+1).wrapAll("<div id='wrapper' style='display:table-row'></div>");
}

}

}

blogPadders();

$(document).ready(blogPadders);
$(window).load(blogPadders);
$(window).resize(blogPadders);

推荐答案

你可以使用循环：

var $div= $('#your_id div'),
    length = $div.length;
for (var i = 0; i < length; i = i + 3) {
    $div.slice(i, i + 3).wrapAll('<div class="group" style="display:table-row" />')
}

喜欢这个为不同的分辨率应用不同的脚本。

Like this apply the different script for different resolutions.

示例：

if($(window).width <= 768){
var $div= $('#your_id div'),
        length = $div.length;
    for (var i = 0; i < length; i = i + 2) {
        $div.slice(i, i + 2).wrapAll('<div class="group" style="display:table-row" />')
    }
}

但我建议你通过引导来建立你的网站响应。 http://getbootstrap.com/

But I suggest you go through the bootstrap to build your website responsive. http://getbootstrap.com/

更新：在调整大小时解包：

$(window).on('resize',function() {
  //to unwrap 
  $('.group').contents().unwrap();
  //now use other codes here to wrap
});

这篇关于响应地包装和解包div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！