0

ブログを作成していて、記事の背景に決まった色を順番で配置していきたいのです。
map等で配列を回すと配列が空になるとループが止まってしまうのでループ数は記事の数に合わせて、その中で4つのカラーを順番に出力していきたいです。
例:記事が20記事あって4つのカラーだと5記事以降色が出力されなくなるので、それをなんとか記事の数繰り返したいです。
どうやって記事の数に合わせて配列を出力したら良いか教えて頂けないでしょうか?

これを無限に(記事の数)繰り返したい。

["orange", "pink", "blue", "red"]

こんな感じにしたい

参照

https://dribbble.com/shots/5489447-MNW-mobile

2 件の回答 2

1

["orange", "pink", "blue", "red"]の配列を指定したサイズの配列へ繰り返し代入したい。例えば、長さが20の配列へ代入する場合は、下記のような出力が必要との理解です。

["orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red","orange","pink","blue","red"]

この理解が正しいようですと、次のようなサンプルスクリプトは如何でしょうか。

Sample script:

const pattern = ["orange", "pink", "blue", "red"];
const max = 20;

const array = Array(max).fill("").map((_, i) => pattern[i % 4]);

console.log(array.length);
console.log(array);

Explanation:

  • このサンプルでは、pattern[i % 4]で配列patternが繰り返し代入されます。
  • iArray(max).fill("")のインデックスで、これを使ってiが増加すると、i % 4の値が0,1,2,3,0,1,2,3,,,のように0~3の間で変化します。これを利用して、patternの各値を代入しています。

Reference:

1
  • 1
    ありがとうございます。これでやってみます。
    – wataru
    Commented 2021年4月26日 6:11
0

HTMLの構造がうまく合えば、nth-child()セレクタで可能です。

article:nth-child(4n+1) {
  background: orange;
}
article:nth-child(4n+2) {
  background: pink;
}
article:nth-child(4n+3) {
  background: blue;
}
article:nth-child(4n) {
  background: red;
}
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。