first look at the code:
<! Doctype html>
<html lang = "EN">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = \, initial-scale = 1.0">
<meta http-equiv = "x-ua-compatible" content = "ie = edge">>
<Title> Document </Title>
</head>
<body>
<div class = "zz">
</div>
<script src = "./ jquery-11.3.min.js"> </script>
<script>
var judge = [{{{
title_img: 'Image/Judge1.png',
jugde_list: [{{
judge_name: "zc",
},
{{
judge_name: "Oscar",
}]
}, {{
title_img: 'Image/Judge2.png',
jugde_list: [{{
judge_name: "Wang Qiang",
},
{{
judge_name: "Zhou Xiaojing",
}]
}, {{
title_img: 'Image/Judge3.png',
jugde_list: [{{
judge_name: "Chenchen",
},
{{
Header: 'Image/wubai.jpeg',
judge_name: "Five hundred",
}]
}]
var chapter;
for (var I = 0; I <judge.length; i ++) {
var a = ''; // very important
for (var j = 0; j <judge [i] .jugde_list.length; j ++) {
a += '<li class = "">' +
'<em>'+judge [i] .jugde_list [j] .judge_name+'</em>'+
'</li>';
}
chapter = '<div class = "box">'
+'<div class = "period_num">'+judge [i] .title_img+'</div>'
+'<ul class = "period_b clearfix">'+a;
'</ul>'+
'</div>';
$ ('. ZZ'). APPEND (Chapter)
}
</script>
</body>
</html>In fact, it is about the cycle problem. There are a lot of projects in the project that will encounter data in the array. We rendering data not only to render one attribute in the object, but also the data of the array in Xu Ran object.
I encountered this problem during development. The array in the rendering object always appears later and the previous superposition. Why is that?
There are the following situations:
1. Define the variable A outside the first for loop. Then each time the cycle is loop, the assignment of A is the result of the previous cycle, so the data will be accumulated over and over again.
2. No initial value for A; just defined VAR A;
The result of
is that variable A has become a global variable, which is the same reason as 1.
If it is written as var a = ”, each cycle will be clearly emptied each time.