Meteor - #each 数组的迭代，每个第 n 项后插入另一个 HTML 元素

Meteor - #each iteration of an array with another HTML element inserted after each nth item

本文关键字：插入 另一个 元素 HTML 数组 #each 迭代 Meteor      更新时间：2023-09-26

我正在使用 #each 迭代器使用 Blaze 迭代 Meteor 中的项目数组，我想在每个第 n（10）个项目之后插入一个 HTML 元素。我想我可以使用@index来访问我所在的数组的索引，但真的不知道如何每 10 个元素插入另一个元素。

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}

根据您的评论，您似乎想要创建一个自定义帮助程序，该帮助程序返回您是否应该在 DOM 中有一个元素：

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
  {{#if shouldAddDiv @index}}
    <div>I was after the 10th item!</div>
  {{/if}}
{{/each}}
Template.TemplateName.helpers({
  shouldAddDiv(index) {
    if(index % 10 === 0) {
      return true;
    } else {
      return false;
    }
  }
});

如果您不希望div 出现在第一个元素之后，请将index % 10更改为 index % 9

您可以使用模 （%），它取两个数字的余数。例如，11%3 = 2，因为 3 在 11 中拟合 3 次，剩下 2 又名余数。

Template.TemplateName.helpers({
    'someHelper': function(whichOne){
        if (whichOne%10 == 0){
            yourArray.push(<newElement>);
        }
    }
});

每当 One%10 为零时，您就命中了数组中的第十个元素。

相关文章：