gpt4 book ai didi

javascript - 在循环内连接 html 标签

转载 作者:行者123 更新时间:2023-11-30 19:18:20 24 4
gpt4 key购买 nike

我一直在连接一个字符串以在数组循环中将其打印为 html。它只在类为 group 的 div 中打印第一个 anchor 标签。我应该修改什么以打印 group div 内的 anchor ?这是示例:

var data = [{
"id": 1969,
"first_release_date": 1083542400,
"name": "Item 1"
},
{
"id": 25076,
"first_release_date": 1083542400,
"name": "Item 2"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 3"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 4"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 5"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 6"
},
{
"id": 9245,
"first_release_date": 1292976000,
"name": "Item 7"
},
{
"id": 9245,
"first_release_date": 1292976000,
"name": "Item 8"
},

{
"id": 9245,
"first_release_date": 1566950400,
"name": "Item 9"
}
];

var tag = "",
release = "",
releaseChecker = 0;

Object.keys(data).forEach(function(key) {
if (data[key].first_release_date != releaseChecker) {
release = new Date(data[key].first_release_date * 1000);
tag += '<h4>' + release.getDate() + '</h4>';
}

if (data[key].first_release_date != releaseChecker) {
tag += '<div class="group">';
}

tag += '<a class="test" href="#">'+data[key].name+'</a>, ';

if (data[key].first_release_date != releaseChecker) {
tag += '</div>';
}
releaseChecker = data[key].first_release_date;
});
$(".el").html(tag);
.group {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

最佳答案

Object.keys() 用于 objectdata 是数组。它可能有效它可能会导致一些意外行为。

除了使用 Object.keys(),您首先可以创建另一个数组来保存分组数据,然后对其进行迭代。

这是一个工作片段:

更新注意:您可以使用 mapjoin 来添加逗号,而不是在末尾对 , 进行硬编码。

var data = [{
"id": 1969,
"first_release_date": 1083542400,
"name": "Item 1"
},
{
"id": 25076,
"first_release_date": 1083542400,
"name": "Item 2"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 3"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 4"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 5"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 6"
},
{
"id": 9245,
"first_release_date": 1292976000,
"name": "Item 7"
},
{
"id": 9245,
"first_release_date": 1292976000,
"name": "Item 8"
},

{
"id": 9245,
"first_release_date": 1566950400,
"name": "Item 9"
}
];


var tag = "",
release = "",
releaseChecker = 0,
groupedData = [];

data.forEach(function(item) {
release = new Date(item.first_release_date * 1000);
if(!groupedData.find(d => d.releaseDate === release.getDate())){
groupedData.push({releaseDate: release.getDate(), items: []});
}

groupedData.find(d => d.releaseDate === release.getDate()).items.push(item);


});
groupedData.forEach(function(data){

tag += '<h4>' + data.releaseDate + '</h4>';
tag += '<div class="group">';

tag += data.items.map(function(item){
return '<a class="test" href="#">'+item.name+'</a>';
}).join(', ');

tag += '</div>';

});

$(".el").html(tag);
.group {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

希望这对您有所帮助。

关于javascript - 在循环内连接 html 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57756932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com