jQuery 特定classをループする方法 each

jQueryで特定クラスをループする方法です。

each()メソッドを使う

eachメソッドを使えば、特定クラスをループすることができます。

$('セレクタ').each(function(index, element){ //ここに処理を記載 });

実際はこんな感じ

<ul>
    <li class="list">１項目</li>
    <li class="list">２項目</li>
    <li class="list">３項目</li>
    <li class="list">４項目</li>
</ul>

$(".list").each(function(i,e){
    if($(e).text === '２項目'){
        // 一致したらクラスを追加する
        $(e).addClass("no2");
        return false;
    }
});

breakはreturn false;で行う

ループを途中で処理を抜けたい場合はreturn false;で終了させます。

continueはreturn true;(false以外)で行う

ループで特定条件以外のものは、次の配列に進みたいcontinueをしたい場合、return;で行います。
returnは[false]以外なら何でも良いです。

ハマったこと

eachメソッドの中で、特定処理を行う実装をしたら、ループが止まらなかった。

functionで別処理を呼び出しているので、特定条件を判別するよう、フラグ管理にして解決した。

var locationFg = false;

$(".list").each(function(i,e){
    if($(e).text === '２項目'){
        // 一致したらクラスを追加する
        locationFg = true;
        return false;
    }
});
var locationStr = "./hoge.html"

if(locationFg){
    locationStr = "./fuga.html"
}
// ページ移動
location.href = locationStr;