在.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

问题出在这里：

您不必要地重复了card 元素。也就是说，您在每个容器中放置 3 卡。这就是为什么您会获得额外的卡片。

您一定只关注循环的第一轮，这可能就是您放置i、i+1 和i+2 的原因。

解决办法：

1. 从ul_data 中删除多余的card 元素。
2. 想出一种使用 CSS 将 3 个卡片放在同一行中的方法。您或许可以使用
   CSS Grid System。

顺便提一下Loops的知识。

希望这个答案有所帮助！

Answer 2

我建议您查看Handlebars，这非常适合您的情况。

在第一步中，您定义了一个 html 模板，然后您将其与一个 json 对象结合以生成您完成的 html 卡片。Html-Template 可以放在您的 index.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>

index.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 还是 Matrilze 这样的框架。因为这将是您查看他们的 Grid-system

的另一种选择