jQueryのeach()文を途中で終了、スキップさせる方法

ここでは、jQueryでeach()文を途中で終了させたり、指定した条件に一致する要素の処理をスキップさせる方法について説明をしていきます。

each()文を途中で終了させる方法

each()文を途中で終了させるには「return false」を用います。

例

HTML

<ul>
  <li><span>リストA</span></li>
  <li><span>リストB</span></li>
  <li><span>リストC</span></li>
  <li><span>リストD</span></li>
  <li><span>リストE</span></li>
</ul>

jQuery

$(function() {
  $("span").each(function(index) {
    if(index === 3) {
      return false;
    }
    $(this).css("background-color", "skyblue");
  });
});

ここでは、指定した<span>要素のインデックスが「3」になった時点で処理を終了させるという内容になっています。

では結果を見てみると

このように、インデックスが「2」の<span>要素までが青色になっていますね。

each()文の途中の処理をスキップする方法

each()文の途中の処理をスキップするためには、「return true」を用います。

例

HTML

<ul>
  <li><span>リストA</span></li>
  <li><span>リストB</span></li>
  <li><span>リストC</span></li>
  <li><span>リストD</span></li>
  <li><span>リストE</span></li>
</ul>

jQuery

$(function() {
  $("span").each(function(index) {
    if(index === 2) {
      return true;
    }
    $(this).css("background-color", "skyblue");
  });
});

ここでは、<span>要素のインデックスが「2」の要素はスキップし、次のインデックスに処理を移すという内容になっています。

では結果を見てみますと、

こうですね。
インデックスが「2」の要素以外が青色で塗りつぶされていますね。

まとめ

このように、each()文を途中で終了させるためには「return false」を、途中の処理をスキップするためには「return true」を用います。