THE HAM MEDIA BLOG

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();

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

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

今後、どんどん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');
    });
});

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