jQueryのeachで配列や要素を繰り返す方法【サンプル有】

jQueryの繰り返し処理を操作する.eachメソッドは、多岐に渡って活用します。

是非、.eachを極めて開発を効率化を目指しましょう。

変数の配列・オブジェクトを繰り返す.each

.eachは、配列を繰り返し取得することが出来ます。

$.each の第一引数に配列を入れることで、key変数に連番、value変数に値が代入されます。

サンプルコード
<script>
$(function(){
    var array = ['apple', 'banana', 'grape'];
    $.each(array, function(key, value){
        console.log(key + ' : ' + value);
    });
});
</script>
実行結果(console.log)

また、連想配列も同様にeachで繰り返し処理が出来ます。

サンプルコード
<script>
$(function(){
    var array = {apple: 'りんご', banana: 'バナナ', grape: 'ぶどう'};
    $.each(array, function(key, value){
        console.log(key + ' : ' + value);
    });
});
</script>
実行結果(console.log)

指定した要素を繰り返す.each

eachは、DOM要素に対して指定もできます。

key変数には連番が、valueにはDOM要素の取得ができます。

繰り返しのvalueを$(value)と書くことで、繰り返しの要素をDOM要素として、各種メソッドで操ることが出来ます。

下記の例ではliのテキスト部分を取得するために、$(value).text()を使用しています。

サンプルコード
<ul class="ex_ul">
    <li>apple</li>
    <li>banana</li>
    <li>grape</li>
</ul>
<script>
$(function(){
    $('.ex_ul li').each(function(key, value){
        console.log(key + ' : ' + $(value).text());
    });
});
</script>
実行結果(console.log)
  • apple
  • banana
  • grape

繰り返し処理をスキップする(continue処理)

繰り返し処理をスキップする処理は、each内に「return true;」と記述することでスキップできます。

サンプルコード
<script>
$(function(){
    var array = ['apple', 'banana', 'grape'];
    $.each(array, function(key, value){
        if(value === 'banana'){
            //bananaだけ処理がスキップされる
            return true;
        }
        console.log(key + ' : ' + value);
    });
});
</script>
実行結果(console.log)

繰り返し処理を中断する(break処理)

繰り返し処理そのものを中断したい場合は、each内に「return false;」と記述することで、繰り返しが終了します。

サンプルコード
<script>
$(function(){
    var array = ['apple', 'banana', 'grape'];
    $.each(array, function(key, value){
        if(value === 'banana'){
            //bananaの時点で処理を終了する
            return false;
        }
        console.log(key + ' : ' + value);
    });
});
</script>
実行結果(console.log)

.eachメソッドの使用例

eachの実践的な使い方を一例として挙げておきます。

例えば、フォーム内の送信ボタンを押した時、同じ<from></from>内のinput要素すべての値を設定した場合のみ送信したい場合は、ボタンと同じformに囲まれたテキストボックスをチェックする必要があります。

そういう時、まずはボタン押下時にformの親要素を取得し、次に.find()でinput要素をeachでチェックすることで、form内のinput要素の値の有無を検索できます。

親要素を取得する.closest、子要素を取得する.findの合わせ技なので、下記のリンクもチェックしておいてください。

サンプルコード
<form>
    <div>名前を入力</div>
    <input type="text" name="username" value="">
    <div>郵便番号を入力</div>
    <input type="text" name="userpost" value="">
    <div>住所を入力</div>
    <input type="text" name="useraddress" value="">
    <div>電話番号を入力</div>
    <input type="text" name="usertel" value="">
    <input type="button" class="usersubmit" value="送信する">
</form>

<script>
$(function(){
    $('.usersubmit').click(function(){
        var error_flg = false;
        //form要素(ボタンを囲っているform親要素)を取得する
        var this_form = $(this).closest('form');
        //ボタンを押したform内に含まれているinput要素をすべてeachで取得し、未入力のものがないか調べる
        this_form.find('input').each(function(key, value){
            if(!$(value).val()){
                error_flg = true;
                //未入力のテキストボックスは枠を赤くする
                $(value).css('border', '1px solid red');
            }else{
                $(value).css('border', '1px solid #CCC');
            }
        });
        if(error_flg){
            alert('未入力の項目があります。');
        }else{
            alert('OK!');
            //↓form送信を行いたい場合は、.submit()で送信が可能
            //this_form.submit();
        }
    });
});
</script>
実行結果
名前を入力
郵便番号を入力
住所を入力
電話番号を入力

PHPの配列とのjQueryの連携で、.eachで繰り返し処理をする

PHPの配列をJavaScriptの配列(json)に変換して、eachで繰り返し処理をすることもできます。

//PHPで配列を設定
$array = ['apple', 'banana', 'grape'];
サンプルコード
<script>
$(function(){
    //PHPで設定した配列をjson_encodeでjsonに変換
    //var array = <?php echo json_encode($array) ?>; と書くと、ソースには下記のように表示される
    var array = ["apple","banana","grape"];
    
    $.each(array, function(key, value){
        console.log(key + ' : ' + value);
    });
});
</script>
実行結果(console.log)

PHPとjQueryを密接に扱うWEBアプリでは、json_encode()で配列を取得することはよくあるので、是非覚えておきましょう。


以上、jQueryのeachで配列や要素を繰り返す方法、でした。

コメント

タイトルとURLをコピーしました