Apply same style to group of element in an array that increase by 4-CodePudding

How do I apply the same style to every elements with 4 increment. For instance, all 1st, 5th, 9th, 13th, 17th elements of the array and so on... have the same style. All 2nd, 6th, 10th, 14th elements and so on... of the array have the same style. All 3rd, 7th, 11th, 15th elements and son o... of the array have the same style. All 4th, 8th, 12th, 16th elements and so on... of the array have the same style.

To achieve this is in CSS, something like this would work:

.list-item {
    &:first-child::before {
      border: 1px solid $green;
    }

    &:nth-child(2)::before {
      border: 1px solid $blue;
    }

    &:nth-child(3)::before {
      border: 1px solid $orange;
    }

    &:nth-child(4)::before {
      border: 1px solid $red;
    }

    &:nth-child(4n 5)::before {
      border: 1px solid $green;
    }

    &:nth-child(4n 6)::before {
      border: 1px solid $blue;
    }

    &:nth-child(4n 7)::before {
      border: 1px solid $orange;
    }

    &:nth-child(4n 8)::before {
      border: 1px solid $red;
    }
}

How do I achieve this in JavaScript and React to be specific?

Thank you.

CodePudding user response：

In CSS:

nth-child(4n 1): 1st, 5th, 9th, etc...
nth-child(4n 2) 2nd, 6th, 10th, etc...
nth-child(4n 3) 3rd, 7th, 11th, etc...
nth-child(4n) 4th, 8th, 12th, etc...

See it working:

p:nth-child(4n   1) {
  color: red;
}

<div>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>

In JavaScript:

arr.filter((_, key) => !(key % 4)) // 1st, 5th, 9th...
arr.filter((_, key) => key % 4 === 1) // 2nd, 6th, 9th...
arr.filter((_, key) => key % 4 === 2) // 3rd, 7th, 10th...
arr.filter((_, key) => key % 4 === 3) // 4th, 8th, 12th...

const arr = [...Array(13).keys()].slice(1)

console.log({
  '4n': arr.filter((_,key) => key % 4 === 3),
  '4n   1': arr.filter((_,key) => key % 4 === 0),
  '4n   2': arr.filter((_,key) => key % 4 === 1),
  '4n   3': arr.filter((_,key) => key % 4 === 2),
  arr
})

CodePudding user response：

So I eventually figured it out by using modulus:

For instance:

for (let i = 1; i <= 100; i  ) {
  if (i % 4 === 1) {
    console.log(`Should be 1, 5, 9, 13, 17: ${i}`);
  }

  if (i % 4 === 2) {
    console.log(`Should be 2, 6, 10, 14, 18: ${i}`);
  }

  if (i % 4 === 3) {
    console.log(`Should be 3, 7, 11, 15, 19: ${i}`);
  }

  if (i % 4 === 0) {
    console.log(`Should be 4, 8, 12, 16, 20: ${i}`);
  }
}