时间戳

首页 > 解决方案 > 为数组中的每 12 个项目添加一个类名，跳过前 14 个项目和最后 14 个项目？

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

问题描述

当数组中的每 12 个元素都像 12、24、48 一样传递时，我想在我的 div 中添加一个“分页符”类名......并且应该跳过第一个和最后一个 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>
  )
})}

标签： javascriptarraysreactjsconditional-statementsjsx

解决方案

设置分页符类名的条件如下...

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; }

推荐阅读