在 .each 循环 jquery 中增加索引值几次

Question

我看了很多关于这个问题的问题，但找不到答案......对不起，如果这是基本的东西，但我仍在学习JS。

我正在解析要提取到卡上的 json 数据(连续 3 张卡(，问题是 .each 循环没有保存 vas 在循环内增加的索引值(3 倍增量(.. 有没有办法存储索引值以在循环中再次使用它的最终状态..

法典：

每个循环都有缩短的卡片代码，

$.each(weekno.slice(), function(i, data) {
var ul_data = [
'<div class="container">'+
'<div class="flex-container">'+
'<div class="card">'+
'<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
'<div class="card-content">'+
'<p>Week '+ weekno[i] +'</p>'+
'<p>Week '+ content[i] +'</p>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="card">'+
'<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
'<div class="card-content">'+
'<p>Week '+ weekno[i+1] +'</p>'+
'<p>Week '+ content[i+1] +'</p>'+
'</div>'+
'</div>'+
'</div>'+              
'<div class="card">'+
'<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
'<div class="card-content">'+
'<p>Week '+ weekno[i+2] +'</p>'+
'<p>Week '+ content[i+2] +'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
'</div>'+];
$("#recentActivities").append(ul_data);

循环正确显示前 3 张牌：

Card 1: Week No. 1,  Content 1 
Card 2: Week No. 2,  Content 2 
Card 3: Week No. 3, Content 3

但随后开始重复：

Card 4: Week No. 2, Content 2 
Card 5: Week No. 3, Content 3 
Card 6: Week No. 4, Content 4

Answer 1

我建议你看看车把，这非常适合你的情况。

在第一步中，您定义一个 html 模板，稍后将其与 json 对象组合以生成完成的 html 卡。Html模板可以放在索引.html中。

网页模板

<script type="text/x-handlebars-template" id="card-template">
{{#each data}} <!--Defines a loop throw the data passed into the template -->
<div class="card">
<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>
<div class="card-content">
<p>Week {{data.weekno}}</p> <!--Read the weeekno from the passed data-->
<p>Week {{data.content}}</p><!--Same as above read the content-->
</div>
</div>
{{/each}} <!--Close loop-->
</script>

索引.html

<div class="container">
<div class="flex-container" id="content-placeholder">
</div>
</div>
<script>
var source = $("#card-template").html();
var template = Handlebars.compile(source);
var data = {
"data" : [
{ weekno: 1, content: 'Week 1' },
{ weekno: 1, content: 'Week 1' },
{ weekno: 1, content: 'Week 1' }
]
};
var html = template(data);
$("#content-placeholder").html(html);
</script>

我不知道你使用的是像Bootstrap还是Materilze这样的框架。因为这将是您查看其网格系统的另一种选择

Answer 2

问题是：

您不必要地重复card元素。也就是说，你在每个容器中放3张牌。这就是您获得额外卡的原因。

你必须只专注于循环的第一轮，这可能就是你把i、i+1和i+2的原因。

解决方案：

1. 从ul_data中删除多余的card元素。
2. 想办法使用 CSS 在同一行中有 3张卡片。您可能
   可以使用CSS网格系统。

顺便说一下，复习一下您对 Loops 的知识。

希望这个答案有帮助！