<!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. CALayer总结（二）

    1.CATransaction 事务: UIView有两个方法,+beginAnimations:context:和+commitAnimations,和CATransaction的+begin 和+ ...

  2. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

  3. C# 线程（六）：定时器

    From : http://kb.cnblogs.com/page/42532/ Timer类:设置一个定时器,定时执行用户指定的函数. 定时器启动后,系统将自动建立一个新的线程,执行用户指定的函数. ...

  4. 【网摘】DICOM 基础简介

    一 什么是DICOM?DICOM是Digital Imaging and Communication of Medicine的缩写,是美国放射学会(American College of Radiol ...

  5. 树--四分树（UVa297）

    郑重声明: 数据结构这部分内容, 由于博主才学很少(且很浅)的内容, 所以现在所写的(大都是抄的)一些典型例题, 再加上一些自己想法和理解而已, 等博主勤加修炼, 以后会大有补充和改进. 粗浅之处, ...

  6. C#正则表达式编程（三）：Match类和Group类用法

    前面两篇讲述了正则表达式的基础和一些简单的例子,这篇将稍微深入一点探讨一下正则表达式分组,在.NET中正则表达式分组是用Match类来代表的.首先先看一段代码: /// <summary> ...

  7. SQL Server索引 (原理、存储)聚集索引、非聚集索引、堆 <第一篇>

    一.存储结构 在SQL Server中,有许多不同的可用排列规则选项. 二进制:按字符的数字表示形式排序(ASCII码中,用数字32表示空格,用68表示字母"D").因为所有内容都 ...

  8. mysql 求时间段平均值

    考虑下面的需求,在一段时间内,间隔一段时间,取一个平均值,把所有的平均值取出来,怎么办?思路:在存储过程中,拼接sql语句.根据起始时间和结束时间,while循环每次加一段时间.DROP PROCED ...

  9. awt组件中文乱码Intellij解决

    -Dfile.encoding=GB18030 -Dfile.encoding=GB18030

  10. jquery mobile 学习总结

    <!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...