Question

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

首先，我有

<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 - 从而制作：

<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以便它变成：

<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，所以它变为：

<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>

我该怎么做？

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

对于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

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);

Answer 1

你可以使用循环：

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" />')
}

像这样适用于不同分辨率的不同脚本。

示例：

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/

更新：在调整大小时展开：

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

Answer 2

您可以使用jquery获取屏幕大小，还有一个用于处理屏幕大小更改的调整大小功能 - 例如：

$(window).resize(function() {
    $(window).height();
    $(window).width();
});

您可以编写一个函数，使用jquery获取所有div，然后遍历它们，每display次添加nth样式，其中n由加载时屏幕大小或调整大小确定。{ / p>

响应地包装和解包div

2 个答案: