<!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. ABAP锁、数据库锁

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

  2. 常用的邮箱服务器（SMTP、POP3）地址、端口

    常用的邮箱服务器(SMTP.POP3)地址.端口 参考网址:http://wenku.baidu.com/link?url=IPv15rPRkd0nsuGH0Dm0A5kFyRaeHJY2_gYpDW ...

  3. iOS - Swift 命令行输入输出

    1.类输出 Swift 语言中类输出方法重: override var description: String{ return String(format: "%@, %@", s ...

  4. [转载] Docker网络原则入门：EXPOSE，-p，-P，-link

    原文: http://dockone.io/article/455 如果你已经构建了一些多容器的应用程序,那么肯定需要定义一些网络规则来设置容器间的通信.有多种方式可以实现:可以通过--expose参 ...

  5. 抓取oschina上面的代码分享python块区下的 标题和对应URL

    # -*- coding=utf-8 -*- import requests,re from lxml import etree import sys reload(sys) sys.setdefau ...

  6. NTFS reparse point

    https://en.wikipedia.org/wiki/NTFS_reparse_point NTFS HARD link: since Windows NT4: files on the sam ...

  7. 选择排序算法Java与Python实现

    Java 实现 package common; public class SimpleArithmetic { /** * 选择排序 * 输入整形数组:a[n] [4.5.3.7] * 1. 取数组编 ...

  8. 自定义MVC Html

    自定义ASP.NET MVC Html辅助方法 在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我 ...

  9. 转！！！Mysql无法创建外键的原因

    在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  10. Hbase之Exception

    [hadoop@master hbase-1.2.2]$ ./bin/hbase shell2016-08-25 13:53:56,898 WARN [main] util.NativeCodeLoa ...