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

【问题标题】：Meteor - #each iteration of an array with another HTML element inserted after each nth itemMeteor - #每个数组的迭代，在每个第 n 项之后插入另一个 HTML 元素
【发布时间】：2016-06-20 07:42:21
【问题描述】：

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

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

【问题讨论】：

元素是指 HTML 元素吗？
是的。例如带有横幅广告的 div 元素

标签： javascript arrays meteor each meteor-blaze

【解决方案1】：

根据您的评论，您似乎想要创建一个自定义帮助器来返回您是否应该在 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

【讨论】：

谢谢，效果很好！也许有一点改进而不是 if/else - return (index > 0 && index % 10 == 0) ||假的；

【解决方案2】：

您可以使用取两个数字的余数的模 (%)。例如 11%3 = 2，因为 3 在 11 中适合 3 次，剩下 2 也就是余数。

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

只要 whichOne%10 为零，您就已命中数组中的第十个元素。

【讨论】：

这是个好主意，但我想在数组中的每个第 10 项之后在 DOM 中插入 HTML 元素。我没有正确解释。