JQuery遍历数据

最新推荐文章于 2023-04-04 12:00:03 发布

实习证明徐学长

最新推荐文章于 2023-04-04 12:00:03 发布

阅读量162

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_47174945/article/details/108730081

版权

数据遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .h3bg{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <!-- <h1>张家界航院</h1>
        <h2>人数：8000</h2> -->
    

    </div>
    <div class="boxbtn">
 <!-- <button>1</button> <button>2</button> -->
    </div>
   
    

  
</body>
<script src="./js/jquery.3.5.1.min.js"></script>
<script>
    var arr = {
			"name": "张家界航院1",
			"num": 8000,
			"class": [{
					"name": "信息系111",
					"num": 500,
					"class": [{
							"name": "软件专业1",
							"code": "193411",
							"num": 53
						},
						{
							"name": "软件专业2",
							"code": "193412",
							"num": 52
						},
						{
							"name": "网络专业3",
							"code": "193421",
							"num": 48
						},
						{
							"name": "网络专业4",
							"code": "193422",
							"num": 43
						}
					]
				},{
					"name": "信息系222",
					"num": 500,
					"class": [{
							"name": "软件专业1",
							"code": "193411",
							"num": 53
						},
						
						{
							"name": "网络专业3",
							"code": "193421",
							"num": 48
						},
						{
							"name": "网络专业4",
							"code": "193422",
							"num": 43
						}
					]
				},
				{
					"name": "航空制造系333",
					"num": 450,
					"class": [{
							"name": "航空制造1",
							"code": "193211",
							"num": 40
						},
						{
							"name": "航空制造2",
							"code": "193212",
							"num": 35
						}
					]
                },
                {
					"name": "航空制造系444",
					"num": 450,
					"class": [{
							"name": "航空制造1",
							"code": "193211",
							"num": 40
						},
						{
							"name": "航空制造2",
							"code": "193212",
							"num": 35
						}
					]
				}
			]
		}

 //  splice()
//    插入数据
        function appandHtml(num){
            $("#wrap").empty()
            $(".box").empty()

            $("#wrap").append('<div><h1>'+arr.name+'</h1><h2>人数：'+arr.num+'</h2></div>')
            $("#wrap").append('<div class="box"></div>')
            var arrSp=arr.class.slice(num*2,(num+1)*2)
            // arrSp =arrSp.class.splice(num-1,2)
            for(var i=0;i<arrSp.length;i++){            
                $(".box").append('<div><h3 class="h3bg">院系:'+arrSp[i].name+'</h3><p>人数'+arrSp[i].num+'</p></div>')
               for(var j=0;j<arrSp[i].class.length;j++){  
                $(".box >div").eq(i).append('<ul><li>'+arrSp[i].class[j].name+'</li><li>人数:'+arrSp[i].class[j].num+'</li></ul>')
               }
            }
           
        }
    appandHtml(1)
    // 便利button
    function forBtn (){
        var page=2;
        for(var i=0;i<arr.class.length/page;i++){
            console.log(i+1)
            var num =parseInt(i+1)
        $(".boxbtn").append('<button οnclick="appandHtml('+i+')">'+num+'</button>')

        }
        
    }
    forBtn()
</script>
</html>