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

Posted 2023-03-16

【中文标题】Meteor - #每个数组的迭代，在每个第 n 项之后插入另一个 HTML 元素

【英文标题】：Meteor - #each iteration of an array with another HTML element inserted after each nth item

【发布时间】：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 元素

【参考方案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 元素。我没有正确解释。