HTML:
<div id="wrapper"></div>
CSS:
#wrapper {
width: 400px;
}
h3 {
color: blue;
}
ul>li {
display: flex;
justify-content: space-between;
background: #13b31f;
color: #fff;
padding: 0 20px;
}
JS:
<script src="./js/jquery-1.4.4.min.js"></script>
<script>
let resData = [
{
"year": "2022",
"reports": [
{
name: "常回家看看",
createTime: "2021-05"
},
{
name: "牵手",
createTime: "2021-03"
}
]
},
{
"year": "2021",
"reports": [
{
name: "千年等一回",
createTime: "2021-05"
},
{
name: "月亮代表我的心",
createTime: "2021-03"
}
]
},
{
"year": "2019",
"reports": [
{
name: "彩虹",
createTime: "2019-10"
},
{
name: "一生有你",
createTime: "2019-06"
},
{
name: "最浪漫的事",
createTime: "2019-05"
},
{
name: "一生所爱",
createTime: "2019-04"
}
]
}
]
$(document).ready(function(){
domRender(resData)
})
function domRender(resData){
$("#wrapper").html("");
let liItem = "";
resData.forEach(item => {
liItem += ` <h3>${item.year}年</h3>
<ul>
${
item.reports.map(itm => {
return `<li>
<p>${itm.name}</p>
<p>${itm.createTime}</p>
</li>`
}).join('')
}
</ul> `
})
$("#wrapper").append(liItem);
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/ca61316c958348d5b9429e41a4368377.png