.each()

http://api.jquery.com/each/

.each( function(index, Element) ) 1.0追加

戻り値:jQuery

マッチした各要素に対して、指定した関数を実行します。

引数	説明
function(index, Element)	各繰り返し処理で実行したい関数を指定します。 index 各要素のインデックス番号です。 Element 繰り返し処理中の要素を参照します。

次のような箇条書きリストがあった場合、

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>

下記の処理を実行すると、

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});

次のように各要素のテキストをアラート表示します。

0: foo
1: bar

ループ処理中にfalseを戻り値として返すと、ループ処理を中断することが出来ます。

デモ

DIV要素をクリックすると、繰り返し処理によって各DIV要素のstyleを変更します。

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; cursor:pointer;
      font-weight:bolder; width:300px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>クリックしてください。</div>
<div>これらの各DIV要素が</div>
<div>繰り返し処理の対象になります。</div>
<script>
  $(document.body).click(function () {
    $("div").each(function (i) {
      if (this.style.color != "blue") {
        this.style.color = "blue";
      } else {
        this.style.color = "";
      }
    });
  });
</script>
</body>
</html>

繰り返し処理中の参照中のDOM要素はthisで参照可能です。 $(this)とするとjQueryのオブジェクトとして扱う事ができます。

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  TODOリスト: <span>(クリックすると斜体を切り替えます)</span>
  <ul>
    <li>食う</li>
    <li>寝る</li>
    <li>遊ぶ</li>
  </ul>
<script>
    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });
</script>
</body>
</html>

falseを返すことで、繰り返し処理を中断しています。

<!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:5px; float:left;
      border:2px blue solid; text-align:center; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>色変更</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">中断</div>
<div></div>
<div></div>
<div></div>
<script>
  $("button").click(function () {
    $("div").each(function (index, domEle) {
      // domEle == this
      $(domEle).css("backgroundColor", "yellow");
      if ($(this).is("#stop")) {
        $("span").text("インデックス番号#" + index + "のDIVで停止");
        return false;
      }
    });
  });
</script>
</body>
</html>