<!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. Linux c 下使用getopt()函数

    命令行参数解析函数 —— getopt() getopt()函数声明如下: #include <unistd.h> int getopt(int argc, char * const ar ...

  2. 51nod 1413 权势二进制 背包dp

    1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB  一个十进制整数被叫做权势二进制,当他的十进制表示的时候只由0或1组成.例如0,1,101, ...

  3. 详解公用表表达式(CTE)

    简介 对于SELECT查询语句来说,通常情况下,为了使T-SQL代码更加简洁和可读,在一个查询中引用另外的结果集都是通过视图而不是子查询来进行分解的.但是,视图是作为系统对象存在数据库中,那对于结果集 ...

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

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

  5. linux下的挂载点和分区是什么关系

    Linux 使用字母和数字的组合来指代磁盘分区.这可能有些使人迷惑不解,特别是如果你以前使用“C 驱动器”这种方法来指代硬盘及它们的分区.在 DOS/Windows 的世界里,分区是用下列方法命名的: ...

  6. PHP中file_put_contents追加和换行

    在PHP的一些应用中需要写日志或者记录一些信息,这样的话.可以使用fopen(),fwrite()以及 fclose()这些进行操作.也可以简单的使用file_get_contents()和file_ ...

  7. 使用火狐的restclient发送http接口post及get请求

    1.在firefox安装restclient插件,具体参照http://jingyan.baidu.com/article/1876c8529b07e3890b137623.html: —.发送pos ...

  8. Android控件_TextView(显示文本框控件)

    一.TextView控件的常用属性  1.android:id——控件的id   2.android:layout_width——设置控件的宽度 wrap_content(包裹实际文本内容) fill ...

  9. 基于dubbo源码包通过Maven构建dubbo的详细步骤

    通过Maven构建dubbo 既然可以下载得到源码以及发布包,那么为什么要去构建dubbo呢?,我们先来看下dubbo的主要模块: 我们不仅要使用dubbo的核心框架,还要使用它的一些服务,比如管理控 ...

  10. php内存处理须知【转】

    04 Mar 11 深入理解PHP内存管理之谁动了我的内存 作者: Laruence(   ) 本文地址: http://www.laruence.com/2011/03/04/1894.html 转 ...