THE HAM MEDIA BLOG

jQuery1.4のリリース前より、いろいろ紹介するとか言って起きながら結局紹介できなかったダメ男です。ちょっと奮起してちょっとずつでもご紹介していくぞ！

ということで、いくつかの機能を自分なりに紹介

今回は.first() と .last()、あとはそれに関するものと、.nextUntil() と .prevUntil()、あと.parentsUntil()の５つを書いておきます。

１、.first() ／ .last()

セレクタのフィルタリングメソッドでの追加で、要素の最初と最後を返します。

//最初の要素
$('li','#demo1 ul').first().append(' First!');

//最後の要素
$('li','#demo1 ul').last().append(' Last!');

.first() ／ .last() DEMO

このメソッドは、次に紹介するメソッドが使われています。

２、.eq(0) ／ .eq(-1)

このメソッドは、○番目の要素を返すもので、今までにもありました。しかし、今までは0以上の整数を利用することができましたが、1.4からマイナスも利用することができ、-1が最後の要素を返します。

//最初の要素
$('li','#demo2 ul').eq(0).append(' First!(.eq(0))');

//最後の要素
$('li','#demo2 ul').eq(-1).append(' Last!(.eq(-1))');

.eq(0) ／ .eq(-1) DEMO

３、.eq(2) ／ .eq(-2)

-1は先ほどご紹介したとおり最後の要素なのですが、後ろから数えて・・・の選択は、そのまま-2、-3と負の整数で返すことができるようになっています。

//3番目の要素
$('li','#demo3 ul').eq(2).append(' .eq(2)');

//最後から２番目の要素
$('li','#demo3 ul').eq(-2).append(' .eq(-2)');

.eq(2) ／ .eq(-2) DEMO

４、.nextUntil() ／ .prevUntil()

要素より前もしくは後の要素から、指定した要素までを返します。

//#demo4-2の要素の前から#demo4-0の前まで
$("#demo4-2").prevUntil('\#demo4-0')
    .append("　$('#demo4-2').prevUntil('#demo4-0')");

//"#demo4-3の要素の次から#demo4-4の前まで
$("#demo4-3").nextUntil('#demo4-4')
    .append("　$('#demo4-3').nextUntil('#demo4-4')");

.nextUntil() ／ .prevUntil() DEMO

５、.parentsUntil()

要素から親要素を階層をたどっていって、指定した要素までの要素を返すみたいです。

//#demo5-3-aの要素の親要素をたどり#demo5-1まで
$('#demo5-3-a').parentsUntil('#demo5-1').css('color','#FF0000')

.parentsUntil() DEMO

とりあえず５つ紹介しました。まだまだあるのですが、小刻みに紹介していけたらなと。。。

一度にまとめられるくらいの時間がほしいものです。