js STUDIO

:nth-child()

$(':nth-child(index/even/odd/equation)') 1.1.4追加

指定された数字の子要素を選択します。この数字は1からスタートします。また、文字列を使った特殊な指定をすることも可能です。

項目 説明
index
even
odd
equation		 マッチさせたい文字列を指定します。
(index)
インデックス番号の子要素が選択されます。開始番号は「1」です。
even
偶数番目の子要素が選択されます。
odd
奇数番目の子要素が選択されます。
(equation)
方程式を指定します。:nth-child(4n)とすると、4の倍数のインデックスの子要素が選択されます。

注意事項

jQueryの:nth-child(n)はCSSの文法が元になっています。 そのため開始番号は「1」からになります。 その他のセレクタの開始番号はjavaScriptの配列が元になっているため、「0」からとなります。 $('li:nth-child(1)') が１つ目のLI要素を選択するのに対し、$('li:eq(1)')は2つ目の要素を選択します。

また、:nth-child(n)と:eq(n)にはマッチ結果にとても紛らわしい違いがあるので注意が必要です。 :eq(n)は親要素の区別なく全体にインデックス番号を順番に振り分けて、該当した番号の要素を一つだけ返すのに対し、 :nth-child(n)は、それぞれの親要素と子要素の関係を考慮して該当する番号の要素を探すので、複数の要素にマッチします。

デモ

:nth-childを使って、各UL要素の2つ目のLI要素の後ろに青字のテキストを出力します。 また、同時に比較として:eq要素の指定も行なっているので両者をよく比較してください。 

<!DOCTYPE html>
<html>
<head>
<style>
  body {font-size:12px;}
  div { float:left; }
  span { color:blue; }
  span.eq {color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
</div>
<div><ul>
  <li>Sam</li>
</ul>
</div>
<div><ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>David</li>
</ul>
</div>
<script>
//1つの指定で2箇所を選択
$("ul li:nth-child(2)").append("<span> - 2nd-child!</span>");
//1つの指定で1箇所を選択
$("ul li:eq(2)").append("<span class='eq'> - eq:2!</span>");
//別のUL親要素同士をまたいでカウントし、選択
$("ul li:eq(7)").append("<span class='eq'> - eq:7!</span>");
</script>
</body>
</html>

ボタンを押すと、ボタンに書かれているセレクタがTRに適用されて実行されます。

<!DOCTYPE html>
<html>
<head>
<style>
  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px;
        border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button>:even</button>
  <button>:odd</button>
</div>
<div><table>
  <tr><td>John</td></tr>
  <tr><td>Karl</td></tr>
  <tr><td>Brandon</td></tr>
  <tr><td>Benjamin</td></tr>
</table></div>
<div><table>
  <tr><td>Sam</td></tr>
</table></div>
<div><table>
  <tr><td>Glen</td></tr>
  <tr><td>Tane</td></tr>
  <tr><td>Ralph</td></tr>
  <tr><td>David</td></tr>
  <tr><td>Mike</td></tr>
  <tr><td>Dan</td></tr>
</table></div>
<span>tr<span id="inner"></span>
</span>
<script>
  $("button").click(function () {
    var str = $(this).text();
    $("tr").css("background", "white");
    $("tr" + str).css("background", "#ff0000");
    $("#inner").text(str);
  });
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM