zoukankan      html  css  js  c++  java
  • json小例子

    <!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>
  • 相关阅读:
    解决maven托管项目中pom.xml存在坐标标红的问题
    Jquery取form表单中的所有参数
    解决IntelliJ IDEA控制台输出中文乱码问题
    Maven项目打包及jar包与war包的区别
    IDEA创建Maven web项目(项目结构组织、文件编译及运行明细)
    http学习笔记--报文构成
    http报文结构
    mount: unknown filesystem type 'vboxsf'
    使用shell做过时处理以及发送邮件的事例
    fuelphp 日志文件保存路径以及日志文件名变更中遇到的问题总结
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/jaon.html
Copyright © 2011-2022 走看看