THE HAM MEDIA BLOG

jQuery1.4のindex()が使い安くなった

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

jQuery 1.4  .index()がちょっと使い安く

jQueryが1.4になって、このバージョンで作業を進めるようになったのですが、本当にいろいろ便利になったなーと思うことがちょこちょこある。

そんな中の一つ、index()のご紹介。

あまり大差ないかのようで地味に便利

使う機会があまりないと、そんなに便利かわからないのかもしれないのですが、1.4から考えやすくなったかなという印象のindex()。

1.3.2以前

今まではクリックした要素が、何番目の要素なのかというのをみるには、下記のような書き方が必要だった。

var num = $('li','ul').index(this);

1.4

それが1.4以降はjQueryらしいというか、書きやすい。というより、覚えやすい。今までのでも、なれてしまえばいいのでしょうけど、今回からの方が断然いいと思う。わざわざどの要素中の・・・というのを書かなくて済むようになりますからね。

var num = $(this).index();

クリックしたとか、イベントを発生させる位置から考えて○○する・・・みたいなことで考えることが多い自分は、こういうところで使いやすくなっていってくれるというのはとても助かる。

たった少しの違いなんですが、ぱっと思い浮かんで使えるかどうかがだいぶ違うと思う、そんなところの紹介dせいた。

今後、どんどん1.4を使っていこっと。

おまけにちょっとしたサンプル

クリックした同じ位置のliも色が変わるというだけのサンプル

jQuery(function($){
    $('li','ul').click(function(){
        var self = $(this),
            elms1 = self.siblings('li'),
            elms2 = self.parent().siblings().children(),
            num = $(this).index();
        elms1.css('background-color','');
        elms2.css('background-color','');
        self.css('background-color','#ff9999');
        elms2.eq(num).css('background-color','#ff9999');
    });
});
  • サンプルA1
  • サンプルA2
  • サンプルA3
  • サンプルA4
  • サンプルA5
  • サンプルA6
  • サンプルA7
  • サンプルA8
  • サンプルA9
  • サンプルA10
  • サンプルB1
  • サンプルB2
  • サンプルB3
  • サンプルB4
  • サンプルB5
  • サンプルB6
  • サンプルB7
  • サンプルB8
  • サンプルB9
  • サンプルB10

CSSでやらなきゃ良かったとか、書いた後に思った。classの方が良かったな。

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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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