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

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

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

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


  • orange
  • pineapple
  • apple

たとえばこのようなコードでは、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日目でした〜。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search