THE HAM MEDIA BLOG

jQuery1.4の追加機能や変更された点など その1

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

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

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

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

1、.first() / .last()

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

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

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

.first() / .last() DEMO

  • デモ1-1
  • デモ1-2
  • デモ1-3
  • デモ1-4
  • デモ1-5

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

2、.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

  • デモ2-1
  • デモ2-2
  • デモ2-3
  • デモ2-4
  • デモ2-5

3、.eq(2) / .eq(-2)

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

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

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

.eq(2) / .eq(-2) DEMO

  • デモ3-1
  • デモ3-2
  • デモ3-3
  • デモ3-4
  • デモ3-5

4、.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

デモ4-1
デモ4-1-a
デモ4-1-b
デモ4-1-c
デモ4-1-d
デモ4-1
デモ4-1-a
デモ4-1-b
デモ4-1-c
デモ4-1-d
デモ4-2
デモ4-2-a
デモ4-2-b
デモ4-3
デモ4-3-a
デモ4-3-b
デモ4-3-c
デモ4-4
デモ4-4-a
デモ4-4-b
デモ4-4-c

5、.parentsUntil()

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

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

.parentsUntil() DEMO

  • デモ5-1-a
  • デモ5-1-b
    • デモ5-2-a
      • デモ5-3-a
      • デモ5-3-b
      • デモ5-3-c
    • デモ5-2-b
    • デモ5-2-c
      • デモ5-4-a
      • デモ5-4-b
      • デモ5-4-c
  • デモ5-4-c

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

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

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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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