検索
連載

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

jQueryのキモともいえる$()関数を始め、jQueryオブジェクトの中核となるメソッドについてまとめた、すぐに役立つ12本を一挙公開。

Share
Tweet
LINE
Hatena



「連載: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.

ページトップに戻る