<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.1.9.0.min.js"></script>
</head>
<body>
<div class="div1">
<div class="item">
<ul>
<li>
<h2>1</h2>
<p>1</p>
</li>
<!--<li>-->
<!--<h2>2</h2>-->
<!--<p>2</p>-->
<!--</li>-->
<!--<li>-->
<!--<h2>3</h2>-->
<!--<p>3</p>-->
<!--</li>-->
<!--<li>-->
<!--<h2>4</h2>-->
<!--<p>4</p>-->
<!--</li>-->
</ul>
</div>
</div>
</body>
<script>
var json = {
list: [
{
id: 1,
title: "标题1"
},
{
id: 2,
title: "标题2"
},
{
id: 3,
title: "标题3"
},
{
id: 4,
title: "标题4"
},
{
id: 5,
title: "标题5"
},
{
id: 6,
title: "标题6"
},
{
id: 7,
title: "标题7"
}
]
}
var num = json.list,
page = Math.ceil(num.length / 4),
wrap = $(".div1"),
itemArray = [];
html = "";
var contant = "";
for (var j = 0; j < num.length; j++) {
contant = " <li>"
+ "<h2>" + num[j].id + "</h2>"
+ "<p>" + num[j].title + "</p>"
+ "</li>";
itemArray.push(contant);
}
console.log(itemArray);
for (var i = 0; i < page; i++) {
var item = "";
for (var n = 0; n < 4; n++) {
if (i * 4 + n < num.length) {
item += itemArray[i * 4 + n];
}
}
html += '<div class="item">'
+ '<ul>'
+ item
+ '</ul>'
+ ' </div>'
// console.log(html);
}
wrap.html(html);
// console.log(html);
</script>
</html>