Q&A
$('.content').each(function(index){}); で何番目かは採れると思います。
【.each() | jQuery API Documentation】
https://api.jquery.com/each/
前提・実現したいこと
divを何個か使っていて、指定したクラスのdivだけ、
背景色を交互に変えたいのですが、どう指定すればいいのかがわかりません。
該当のソースコード
HTML
1<html> 2<body> 3 <div> 4 <p>tes</p> 5 </div> 6 <div class="content"> 71 8 </div> 9 <div> 10 <p>tes</p> 11 </div> 12 <div class="content"> 13 2 14 </div> 15 <div> 16 <p>tes</p> 17 </div> 18 <div class="content"> 19 3 20 </div> 21</body> 22</html> 23
CSS
1.content:nth-child(2n+1){ 2 background-color: pink; 3} 4.content:nth-child(2n){ 5 background-color: red; 6}
発生している問題・エラーメッセージ
現在のソースコードですと、1，2，3が赤くなっていますが、
1と3の背景色をピンク、2を赤というようにしたいです。
試したこと
.content div:nth-child
で試すと、背景色が指定できませんでした。
回答4件
0
nth-childの使い方の問題ですね、下記の画像で見ていただくのがいいかと思います。
div:nth-child(2)とcontent:nth-child(2)はイコールになります。
なので、2nである全てのcontentが赤になってしまいます。
構成がかわらなければ、4n、4n+2にするのが良いと思います。
css
1.content:nth-child(4n+2){ 2 background-color: pink; 3} 4.content:nth-child(4n){ 5 background-color: red; 6}
投稿2018/02/16 04:18
総合スコア3404
0
ちゃんとやるならjavascriptなどで別のクラスをつけることです
javascript
1$(function(){ 2 $('.content').each(function(){ 3 $(this).addClass($('.content').index(this)%2==0?"even":"odd"); 4 }); 5});
CSS
1.odd{color:red} 2.even{color:blue}
HTML
1<div><p>tes</p></div> 2<div class="content">1</div> 3<div><p>tes</p></div> 4<div class="content">2</div> 5<div><p>tes</p></div> 6<div class="content">3</div> 7<div><p>tes</p></div> 8<div class="content">4</div> 9<div><p>tes</p></div> 10<div class="content">5</div>
投稿2018/02/16 04:22
編集2018/02/16 04:25
総合スコア117615
kei344さん、ありがとうございます
そう言えばindexは渡すんでしたね
ご指摘の方法がよいと思います
javascriptについて、よくわかっていませんが、
更新をする必要がある際は、javascriptを使った方が便利ですね。
勉強になります。ありがとうございました。
0
.content:nth-child(2n) は「.content の nth-child(2n) 番目」ではなく、「同階層の nth-child(2n) 番目で、.content がついている要素」という表現になります。
下記のようにすれば「tes」がピンクになるのがわかると思います。
CSS
1div:nth-child(2n+1){ 2 background-color: pink; 3} 4div:nth-child(2n){ 5 background-color: red; 6}
なので、構造を変えて下記のようにするのはいかがでしょうか。
HTML
1<div> 2 <p>tes</p> 3 <div class="content"> 4 1 5 </div> 6</div> 7<div> 8<p>tes</p> 9 <div class="content"> 10 2 11 </div> 12</div> 13<div> 14 <p>tes</p> 15 <div class="content"> 16 3 17 </div> 18</div>
CSS
1div:nth-child(2n+1) > .content { 2 background-color: pink; 3} 4div:nth-child(2n) > .content { 5 background-color: red; 6} 7```**動くサンプル：**[https://jsfiddle.net/6jws76h8/3/](https://jsfiddle.net/6jws76h8/3/)
投稿2018/02/16 04:06
総合スコア69625
わかりやすく説明していただいて、感謝いたします。
クラス名の書き方があやふやですので、勉強し直したいと思います。
0
ベストアンサー
nth-childは要素の種類に関係なく上から数えますから、このようにするといいと思います
CSS
1.content:nth-child(2n){ 2 background-color: red; 3} 4.content:nth-child(4n){ 5 background-color: pink; 6}
投稿2018/02/16 04:04
編集2018/02/16 04:37
総合スコア36
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/16 16:08