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

json小例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. C# Newtonsoft.Json解析数组的小例子[转]

    https://blog.csdn.net/Sayesan/article/details/79756738 C# Newtonsoft.Json解析数组的小例子  http://www.cnblog ...

  3. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  4. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  5. Gson解析的小例子

    最近解析些复杂的节点数据解析,用安卓自带的json解析比较麻烦所以只能用Gson解析,所以从网上下了点demo来看看 http://blog.csdn.net/tkwxty/article/detai ...

  6. Java处理文件小例子--获取全国所有城市的坐标

    需求:前端展示数据,全国城市的坐标

  7. MongoDB MapReduce 小例子

    var map = function(){ if (this.gscode == "ZTJB"){ ymd = this.ymd; emit("maxymd", ...

  8. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

  9. Vuex2.0边学边记+两个小例子

    最近在研究Vuex2.0,搞了好几天终于有点头绪了. 首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各 ...

随机推荐

  1. [SAP ABAP开发技术总结]选择屏幕——PARAMETERS

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. POJ 3104 Drying(二分答案)

    题目链接:http://poj.org/problem?id=3104                                                                  ...

  3. LINQ 如何实现 in 与 not in

    T-SQL的IN: Select ProductID, ProductName, CategoryID From dbo.Products Where CategoryID , ) T-SQL的NOT ...

  4. placeholder在ie浏览器里不显示的问题解决

    <script type="text/javascript"> if( !('placeholder' in document.createElement('input ...

  5. iOS - UIDevice

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIDevice : NSObject @available(iOS 2.0, *) public class UI ...

  6. [转载] 读《UNIX网络编程 卷1：套接字联网API》

    原文: http://cstdlib.com/tech/2014/10/09/read-unix-network-programming-1/ 文章写的很清楚, 适合初学者 最近看了<UNIX网 ...

  7. SQL 总结

    1. select 使用正则表达式 正则表达式的模式串, 与linux基本相同, oracle提供以下4个函数来支持正则表达式: REGEXP_LIKE: 比较一个字符串是否与正则表达式匹配(看来是返 ...

  8. nodejs学习笔记<四>处理请求参数

    在web开发中处理请求参数是个非常常见的工作:nodejs提供了了querystring用来处理请求参数. querystring常用方法有:parse,stringify. (1)parse: 解析 ...

  9. dateTimePicker的使用，时间控件

    <li> <label>促销时间<span class="imprt">*</span></label> <inp ...

  10. git命令之git rebase 的用法

    rebase 假设你现在基于远程分支"origin",创建一个叫"mywork"的分支. $ git checkout -b mywork origin 现在我 ...