.クラス名:nth-child(数)が効かない(jQuery)

###質問
aというクラスの1番目の背景を赤にするにはどうすればいいのでしょうか？
htmlを書き換えずにjqueryだけでうまく色を変える方法が知りたいです
$("div:nth-child(2)").css("background","red");だといけるんですけど。セレクタにclassを使う方法での解決を知りたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
6<style>
7div{
8    width:200px;
9    height:10px;
10    margin:30px;
11    border-style:solid;
12}
13</style>
14</head>
15<body>
16    <div class="b"></div>
17    <div class="a"></div>
18    <div class="a"></div>
19    <div class="a"></div>
20    <div class="a"></div>
21    <div class="a"></div>
22    <div class="a"></div>
23<script>
24$(".a:nth-child(1)").css("background","red");
25</script>
26</body>

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

回答2件

ベストアンサー

nth-childはクラス名に有効なものではないのではないでしょうか。
というわけでeqを使いましょう。ちなみに、eqは0から数えるので最初の要素を指定するときは0と指定する必要があります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
6    <style>
7        div {
8            width: 200px;
9            height: 10px;
10            margin: 30px;
11            border-style: solid;
12        }
13
14    </style>
15</head>
16<body>
17<div class="b"></div>
18<div class="a"></div>
19<div class="a"></div>
20<div class="a"></div>
21<div class="a"></div>
22<div class="a"></div>
23<div class="a"></div>
24<script>
25    $(".a").eq("0").css("background", "red");
26</script>
27</body>
28</html>

投稿2016/12/10 22:06

退会済みユーザー

総合スコア0

eq()を使えばできそうですね、

:nth-child()は、クラスで絞る前の要素数なので、:nth-child(1)はclassがbの最初の要素になってしまうようです。

参考：【CSS】nth-childとnth-of-typeでもう混乱しない。
※ただしこの場合、同じdivだから:nth-of-type()も使えないみたいです。なのでeq()を使えばいいみたいです。
参考：Jquery get nth-child having a particular class

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
6<style>
7div{
8    width:200px;
9    height:10px;
10    margin:30px;
11    border-style:solid;
12}
13</style>
14</head>
15<body>
16    <div class="b"></div>
17    <div class="a"></div>
18    <div class="a"></div>
19    <div class="a"></div>
20    <div class="a"></div>
21    <div class="a"></div>
22    <div class="a"></div>
23<script>
24$(".a:eq(0)").css("background","red");
25</script>
26</body>