$.eachのループを途中で止める (軽めのjQuery Advent Calendar 2012 7th day)

$.eachを回して途中で止める

$.eachはたとえば複数の要素を示すjQueryオブジェクトをループして、ひとつひとつに対して処理を適用することができます。jQueryプラグインなぞを開くと、かなりの高確率で使用されている人気のAPIです。

そんな$.eachは、return falseでいわゆるbreak(中断)をすることができます。知ってると便利かも、ぐらいの軽いおはなし。

<script>
$(function() {
  // フルーツを集めて
  var $fruits = $('#fruits li');

  $fruits.each(function() {
    // パイナップルだったら...
    if ($(this).text() === 'pineapple') {
      // ループを止める
      return false;
    // または...
    } else {
      // background-color: yellow にする
      $(this).css('background-color', 'yellowgreen');
    }
  });
});
</script>

<ul id="fruits">
  <li>orange</li>
  <li>pineapple</li>
  <li>apple</li>
</ul>

たとえばこのようなコードでは、orange・pineapple・appleの順に並んだ要素をループして検査し、pineappleであれば、ループを止めてそうでなければ背景に色をつけています。この例で期待される動作は、最初のorangeだけに色がつくのが正しいです。

実行結果は以下

Iterate by $.each

こんな感じになります。期待通りの動作ですね。

do Zepto?

比較対象にZepto.jsを出してみました。do Zeptoをすると、同じ処理をZeptoで行います。

Zepto.jsは、jQueryとほとんど同じAPIをもった軽量互換ライブラリです

挙動が違うのが分かるでしょうか? jQueryがreturn falseで中断されるのに対して、Zeptoはreturn trueだろうとreturn falseだろうと、途中でreturnしたときは単純に次のループに進みます。

これはjqMobiも同様で、jQuery互換ライブラリを標榜する連中が、実はてきとーなところで互換性を端折っている典型例でしょう。

おしまい

途中で寄り道しちゃいましたが、広義のjQueryということで!

以上、軽めのjQuery Advent Calendar 2012の7日目でした〜。