jQuery オブジェクトに対する便利なメソッド

.each()は、$.each()と同様に、主に反復処理のために使用します。jQueryオブジェクト内の要素を1つずつ走査し、各要素に対してコールバック関数を適用します。コールバック関数には、要素のインデックス値と要素自体を引数として渡せます。.get()は、jQueryオブジェクトからDOM要素を取り出します。引数としてインデックス値を渡した場合、そのインデックス値にマッチする、1つの要素が返されます。引数を省略した場合、jQuery内のすべてのDOM要素が配列として返されます。.index()は、指定された要素のjQueryオブジェクト内におけるインデックス値を返します。指定された要素が見つからなかった場合、-1が返されます。引数を省略した場合、兄弟要素の集合に対する、指定した要素のインデックス値が返ります。.toArray()は、jQueryオブジェクトを配列に変換します。

書式

$( 対象要素 ).each(function( インデックス　, 要素)
{処理・・・});
$( 対象要素 ).get([インデックス]);
$( 対象要素 ).index(要素);
$( 対象要素 ).index();
$( 対象要素 ).index(セレクタ);
$( 対象要素 ).toArray();

$('div').each(function(i, elem){ ・・・処理・・・ });
$('div').get();
$('div').index();
$('div').index(document.getElementById('foo'));
$('div').index('#foo');
$('div').toArray();

サンプル

.each()、.index()、.size()を使って、jQueryオブジェクト内の要素を順に処理する

<script>
      $(document).ready(function(){
        $('div').each(function(){
          $(this).css("font-size", 10 + $(this).index() * 5);
        });
        alert($('div').size()+'つの要素を処理しました');
      });
    </script>

カテゴリー:JavaScriptjQueryユーティリティ