jQueryで要素に順番に色つけしていき、特定のところで最初に戻る

曖昧な内容で申し訳ないですが、例えば要素が10個並んでいる(生成されてどんどん増える)として、
5番目まで順に赤→緑→オレンジ→青→黄色と色をつけていき、
6番目からまた赤→緑…というように色つけのルールを繰り返すにはどのような記述をすれば良いのでしょうか。
:nth-of-type(●n)や(i % ●) == 0みたいな記述を駆使するのかと思ったのですが自分で試した限りではうまくいかず、調べようにもいまいちどう調べて良いかわからずjQueryの理解もまだ浅いものでこちらで質問させていただきました。
よろしくお願いします。

行動規範の内容に同意します

回答3件

対象が共通の親の連続する子要素であれば、CSS だけで可能です。

共通の親に class="parent" が付いているとして、

css
1.parent > :nth-child(5n+1) {
2  color: red;
3}
4.parent > :nth-child(5n+2) {
5  color: green;
6}
7.parent > :nth-child(5n+3) {
8  color: orange;
9}
10.parent > :nth-child(5n+4) {
11  color: blue;
12}
13.parent > :nth-child(5n) {
14  color: yellow;
15}

投稿2022/05/06 05:51

編集2022/05/06 05:55

int32_t

総合スコア20880

Azuver

2022/05/06 05:54

ありがとうございます。今後増える可能性のある実装を踏まえるとjQueryでのやり方が良かったのですがこちらのやり方も覚えておこうと思います。

行動規範の内容に同意します

ベストアンサー

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8<div id="sample">
9    <ul class="colored">
10        <li>1</li>
11        <li>2</li>
12        <li>3</li>
13        <li>4</li>
14        <li>5</li>
15        <li>6</li>
16        <li>7</li>
17        <li>8</li>
18        <li>9</li>
19        <li>10</li>
20    </ul>
21</div>
22<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
23        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
24        crossorigin="anonymous"></script>
25<script>
26    $(function () {
27        const colors = ['red', 'green', 'orange', 'blue', 'yellow'];
28        $('.colored > li').each(function (i, item) {
29            let num = i % colors.length;
30            $(item).css({
31                color: colors[num]
32            });
33        });
34    });
35</script>
36</body>
37</html>

投稿2022/05/06 05:38

phper.k

総合スコア3923

Azuver

2022/05/06 05:49

早速ありがとうございます。 eachというコマンドがあるんですね。勉強になりました。

行動規範の内容に同意します

javascript
1<script>
2$(function(){
3  var colors=["red","green","orange","blue","yellow"];
4  $('li').css('color',function(){
5    return colors[$('li').index(this)%colors.length];
6  });
7});
8</script>
9<ul>
10<li>1</li>
11<li>2</li>
12<li>3</li>
13<li>4</li>
14<li>5</li>
15<li>6</li>
16<li>7</li>
17<li>8</li>
18<li>9</li>
19<li>10</li>
20<li>11</li>
21</ul>