jqueryでそれぞれ背景色を変えたい

jqueryでdivを５個作り１～５の番号を振ってそれぞれ異なる背景色にしたいです。
swichで書くとすべての背景色が#bbbになってしまいました、、
どうすればできるでしょうか、？よろしくお願いします。

html
1<div class="w"></div>

scss
1  body{counter-reset: n};
2  .w{
3    display: flex;
4  }
5  .q{
6    width: 20px;
7    height: 20px;
8    text-align: center;
9    margin-right: 3px;
10    font-size: 12px;
11    &:before{
12      counter-increment: n;
13      content: counter(n);
14    }
15  }

js
1for (let i = 0; i < 5; i++) {
2      $('.w').append('<div class="q"></div>');
3      switch (i) {
4        case 0:
5          $('.q').css('background','#fff');
6          break;
7        case 1:
8          $('.q').css('background','#eee');
9          break;
10        case 2:
11          $('.q').css('background','#ddd');
12          break;
13        case 3:
14          $('.q').css('background','#ccc');
15          break;
16        case 4:
17          $('.q').css('background','#bbb');
18          break;
19      }
20}

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

回答4件

$('.q').css('background','#fff'); は実行された時点に存在する全ての.qの背景を白にする処理になります。
なので、appendする際に個別にフラグを付けるか、switch の直後に$('.q').removeClass('q');を入れるかしたらよいです。
（訂正：qにスタイル設定されているのを見落としていたので、下記コードのように捨てクラスxを準備しました）

JavaScript
1for (let i = 0; i < 5; i++) {
2      $('.w').append('<div class="x q"></div>');
3      switch (i) {
4        case 0:
5          $('.x').css('background','#fff');
6          break;
7        case 1:
8          $('.x').css('background','#eee');
9          break;
10        case 2:
11          $('.x').css('background','#ddd');
12          break;
13        case 3:
14          $('.x').css('background','#ccc');
15          break;
16        case 4:
17          $('.x').css('background','#bbb');
18          break;
19      }
20      $('.x').removeClass('x');
21}
22```**動くサンプル：**[https://jsfiddle.net/vf5sp1L9/](https://jsfiddle.net/vf5sp1L9/)

投稿2019/10/18 07:26

編集2019/10/18 07:31

kei344

総合スコア69596

kei344

2019/10/18 07:33

あ、$('.q:last') のほうが簡単かつ簡潔だった･･･。

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

$('.q')に対して処理をするとすべての.qに反応します
ソースを活かすならたとえばこうするとよいでしょう

javascript
1$('.q:last').css({・・・});

投稿2019/10/18 07:29

編集2019/10/18 07:31

yambejp

総合スコア116694

文面通りに受け取るのであれば、qに対して番号を振りたいとのことなので
後でもわかるように「loop何回目で作成されたか？」というクラスを付与します
（もしそれが要らないのであれば、$('.q:last')が最適だと思います。）

JavaScript
1for (let i = 0; i < 5; i++) {
2      $('.w').append('<div class="q loop'+i+'"></div>');　　    
3      const colorArray = ['#fff','#eee','#ddd','#ccc','#bbb'];
4      $('.q.loop'+i).css('background', colorArray[i]);
5}

(1)番号が分かるようなクラスを付与する
(2)ループの回数に応じた付与したい色の配列を作成する
(3)cssを変更する際に、該当の(1)で付与したクラスを選択し、配列から色を取り出す

投稿2019/10/18 07:51

退会済みユーザー

総合スコア0

ベストアンサー

色を付けてから挿入すれば紛れはないです。

JavaScript
1  for (let i = 0; i < 5; i++) {
2    const q = $('<div class="q"></div>').css('background', ['#fff', '#eee', '#ddd', '#ccc', '#bbb'][i]);
3    $('.w').append(q);
4  }