<!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开发技术总结]字段符号FIELD-SYMBOLS

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

  2. FJNU 1153 Fat Brother And XOR（胖哥与异或）

    FJNU 1153 Fat Brother And XOR(胖哥与异或) Time Limit: 1000MS   Memory Limit: 257792K [Description] [题目描述] ...

  3. STORM_0001_用vmware拷贝出三个相同的ubuntu搭建小的zookeeper集群

    第一次配置zookeeper的集群 因为想运行storm必须搭建集群在自己的电脑上拷贝了自己的ubuntu虚拟机采用的是vmware给虚拟机分配的地址三个机器的配置基本上一样除了myid这个文件看了这 ...

  4. clang: error: linker command failed with exit code 1 (use -v to see invocation)

    报错提示: ... ld: 6 duplicate symbols for architecture x86_64 clang: error: linker command failed with e ...

  5. Spring + JDBC 组合开发集成步骤

    1:配置数据源,如: <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="h ...

  6. 初始Hibernate框架技术

    hibernate: 定义:ORM:Object Relational Mapping 对象 关系 映射 使用hibernate时几个必要的: 1.实体类 2.映射文件(类  -数据库表,属性-字段) ...

  7. Nginx 的RTMP打流模块配置

    config配置文件: user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; ev ...

  8. bootstrap学习笔记<四>（table表格）

    表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑  .table:基础表格 ☑  .table-striped:斑马线 ...

  9. 2014 Multi-University Training Contest 4

    1006 hdu4902 #include <iostream> #include<stdio.h> #include<vector> #include<qu ...

  10. java文件操作（读流）

    try{ InputStream is = new FileInputStream("abc.txt"); InputStreamReader ir = new InputStre ...