THE HAM MEDIA BLOG

jQueryメモ:クリックしたのは何番目の要素?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
INDEX

クリックした要素は何番目?

クリックした要素、例えばリストなんかで、そのクリックした要素がリスト中の何番目なのかというのを取得する方法、以前は普通に使っていたような気がするのですが、ここ最近思い出せない。検索してもなかなかでてこなかったりして悩んだのですが、普通にリファレンスに書いてあるじゃーんってのに遅いですが気づいたのでメモエントリー。



何番目の要素か

何番目の要素なのかを調べるには、jQueryのindex()を使う。

■サンプルHTML

<div id="test0">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
</ul>
<p>クリックした要素は<span>?</span>番目です</p>
</div>

リストをクリックした際に「?」の部分が変わる。クリックした要素が何番目なのかを表示する。

■サンプルスクリプト

$("div#test0 ul li").click(function () {
  var index = $("div#test0 ul li").index(this);
  $("div#test0 p span").text(index + 1);
})

$(セレクタ).index(セレクタの中のどれ?)というような指定になる。今回は、「リストの中のクリックしたもの」を表示させる。

ちなみに「index + 1」としているのは、要素の開始が0番目からなので、わかりやすいようにプラス1をしている。

■サンプルデモ

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6

クリックした要素は番目です

何番目なのかは、今回のようにindex()を使うと楽というのがわかりました。使うかわからないですが、とりあえず勉強になった。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。