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

Posted 2023-03-16

【中文标题】在.each循环jquery中增加索引值几次

【英文标题】：Increasing index value inside .each loop jquery several times

【发布时间】：2020-04-06 15:03:07

【问题描述】：

我看了很多关于这个的问题，但找不到答案..对不起，如果这是基本的东西，但我还在学习 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

【问题讨论】：

能发一下json数据吗？

json 是使用 $.ajax( url:url, realtime: true, dataType:"jsonp",

从 google sheet 中解析出来的

如果我能看到至少一部分 json 数据会更容易得出答案

我什至没有发布卡片的完整代码，但会尝试拿出演示数据来运行

这是一个演示数据jsfiddle.net/wtydLo3b/1

【参考方案1】：

问题出在这里：

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

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

解决办法：

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

顺便提一下Loops的知识。

希望这个答案有所帮助！

【讨论】：

谢谢，我是编程新手，这就是为什么大声笑...我想找到另一种方法来连续制作卡片...但是假设我想使用相同的代码...是有什么方法可以在再次循环之前多次更改循环内的索引值？

我已经尝试过网格，但它似乎不适用于循环.. 如果可能的话，请您帮忙 jsfiddle.net/wtydLo3b/1。

【参考方案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

的另一种选择

【讨论】：

顺便说一句，这与我想要的演示数据完全相同 jsfiddle.net/wtydLo3b/1... 它非常简单，无需在 css 中进行迭代