为数组中的每 12 个项目添加一个类名，跳过前 14 个项目和最后 14 个项目？答案

【问题标题】：add a className for every 12th item in array skipping first 14 items and last 14 items?为数组中的每 12 个项目添加一个类名，跳过前 14 个项目和最后 14 个项目？
【发布时间】：2021-11-02 18:49:26
【问题描述】：

当数组中每 12 个元素（如 12、24、48...）传递时，我想在我的 div 中添加一个“分页符”className，并且应该跳过第一个和最后一个 14 个元素。

{orderData.map((el, i) => {
  let condition = i >= 14 && i % 12 === 0; // how to write the condition here ?
  return (
    <tr className={`item ${condition && "pagebreak"}  `}>
      // ... 
    </tr>
  )
})}

【问题讨论】：

@HassanImam ...不。

标签： javascript arrays reactjs conditional-statements jsx

【解决方案1】：

 {orderData.map((el, i) => {
            
           if(i >14 && i% 12 ===0 && i < orderData.length - 14 ){
            return (
              <tr className={`... `}>
              )
         }
      return (
              <tr >
              )
})

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【解决方案2】：

设置page-break类名的条件如下...

const isPageBreak =
  ((idx + 1) % 12 === 0) && // - every 12th item ... except for ...
  (idx >= 13) &&            // - skip first 14 items.
  (idx < arr.length - 14);  // - skip last 14 items.

测试代码...

console.log([

    1,2,3,4,5,6,7,8,9,10,
    11,12,13,14,15,16,17,18,19,20,
    21,22,23,24,25,26,27,28,29,30,
    31,32,33,34,35,36,37,38,39,40,
    41,42,43,44,45,46,47,48,49,50,
    51,52,53,54,55,56,57,58,59,60,61,
  //62,
  
  ].map((item, idx, arr) => {
    const isPageBreak =
      ((idx + 1) % 12 === 0) && // - every 12th item ... except for ...
      (idx >= 13) &&            // - skip first 14 items.
      (idx < arr.length - 14);  // - skip last 14 items.

    return item + (isPageBreak ? ' :: pagebreak' : '');
  })
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

【讨论】：