使用するスクリプト

$(【要素】).each(function() {
【処理】
);}

サンプル

解説

jQueryは、$(‘xxx’)の記述で非常に簡単に要素を指定することができます。例えば$(‘li’)は、リストを指定できます。この時、次のHTMLのようにリストが複数ある場合は、一番上の要素だけが指定されます。

<form id="form1" name="form1" method="post" action="">
  <input type="button" name="button" id="btnClick" value="クリックしてください" />
</form>
<ul class="default">
  <li>1つめ</li>
  <li>2つめ</li>
  <li>3つめ</li>
</ul>

もし、対象のすべての要素を指定したい場合は「each」メソッドを使って、繰り返し要素にアクセスしていきます。例えば、次のスクリプトを見てみましょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnClick').click(function() {
        $('li').each(function() {
            $(this).addClass('red');
        });
    });
});
</script>

jQueryのライブラリは、Google AJAX Libraries APIを利用すると良いでしょう。

「btnClick」のボタンをクリックしたら、li要素にアクセスし「red」というクラスを付加しています。ちなみに、このクラスは次のように定義されています。

.red {
	color: red;
}

すると、リストの内容は赤くなります。

この時、eachメソッドは繰り返し対象にアクセスしていきますので、結果として3つあるli要素はすべて赤くなります。

関連項目

• 要素の数を取得するサンプルプログラム(jQuery)

Tweet