js STUDIO

:eq()

$(':eq(index)') 1.0追加

指定したインデックス番号にマッチする要素を選択します。

項目 説明
index マッチした要素内で取得したい要素の「0」始まりのインデックス番号を指定します。

$(':eq(-index)') 1.8追加

指定したインデックス番号にマッチする要素を選択します。

項目 説明
-index マッチした要素内にて、最後の要素から反対にカウントして、取得したい要素を0始まりのインデックス番号で指定します。

jQueryの1.8より前のバージョンでは、:eq(index)セレクタはindexに負の値を 受け入れていませんでした。(.eq(index)メソッドでは受け入れていた)

注意事項

インデックスに関するセレクタは(:eq(), :lt(), :gt(), :even, :odd)は、マッチする要素を更に絞り込みます。 また、これらのセレクタは0始まりの番号を指定します。例えば、.myclassのセレクタにマッチした要素が4つあったとすると 適用できるインデックス番号は0～3になります。

javaScriptのArrayが0始まりなのに関連して、$('.myclass:eq(1)')は1つ目の要素ではなく2つ目の要素が選択されます。 それに対して、:nth-child(n)はCSSに従って1始まりになります。

.eq(index)メソッドとは違い、:eq(index)セレクタはマイナスの値を指定することが出来ません。 例えば、$('li').eq(-1)と指定すると最後のLI要素が選択されますが、$('li:eq(-1)')は何も選択しません。

:eq()はjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 最高のパフォーマンスを出すためには、純粋なCSSセレクタのみを使用して要素を特定し、 それに対して$("your-pure-css-selector").eq(index)を適用してください。

デモ

3つ目のTD要素を選択して、フォントカラーを赤に変更しています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>
</body>
</html>

:eq()は一つだけしか要素をマッチしません。 それに対してnth-child()を各要素にマッチします。 また、下記のようにループ処理を利用すれば、各要素にマッチさせることが可能です。 

<!DOCTYPE html>
<html>
<head>
  <style>
    body{font-size:12px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
<script>
// :eq(1)に該当するLI要素を一つだけ、背景色を黄色に変更しています。
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );

// :eq(1)に該当するLI要素を、それぞれフォントスタイルを斜体に変更しています。
$("ul.nav").each(function(index) {
  $(this).find("li:eq(1)").css( "fontStyle", "italic" );
});

// li:nth-child(2)に該当するそれぞれの要素のフォント色を赤に変更しています。
$("ul.nav li:nth-child(2)").css( "color", "red" );
</script>
</body>
</html>

List 2、item 2を最後から2番目を指定して、classを追加しています。 

<!DOCTYPE html>
<html>
<head>
<style>
.foo {
  color: blue;
  background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>

<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM