連載
» 2010年03月12日 00時00分 公開

連載:jQuery逆引きリファレンス:第5回 コア編 (9/13)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 eqメソッドを利用することで、指定されたインデックス番号indexの要素を取り出すことができます。引数indexに指定できるのは、0 〜 length - 1の値です。

 以下は3番目の<li>要素を取得し、その内容をフェードアウトするサンプルです。

<script type="text/javascript">

$(function() {
  // 3番目の<li>要素をフェードアウト
  $('#news li').eq(2).fadeOut(3000);
});

</script>

  ……中略……

<ul id="news">
  <li><img src="http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg" alt="ASP.NET MVC実践プログラミング" /></li>
  <li><img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="10日でおぼえるASP.NET入門教室" /></li>
  <li><img src="http://www.wings.msn.to/books/978-4-8399-2708-0/978-4-8399-2708-0_logo.jpg" alt="JavaScriptマスターブック" /></li>
</ul>

リスト086 3番目の<li>要素を3000ミリ秒かけてフェードアウト(Eq.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


3つ目の画像が3秒かけて消えていく

リスト086の実行結果

 eqメソッドを利用する代わりに、:eqセレクタで対象の要素を絞り込んでも同じ意味です。

 最初から特定の要素だけを操作したい場合には、:eqセレクタを利用した方がコードはシンプルに記述できます。eqメソッドは、最初に要素セット全体に対して操作を施し、その後、その中の特定の要素に対してのみ操作したいというケースで利用するとよいでしょう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。