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>
また、連想配列も同様にeachで繰り返し処理が出来ます。
<script>
$(function(){
var array = {apple: 'りんご', banana: 'バナナ', grape: 'ぶどう'};
$.each(array, function(key, value){
console.log(key + ' : ' + value);
});
});
</script>
指定した要素を繰り返す.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>
- 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>
繰り返し処理を中断する（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>
.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>
PHPとjQueryを密接に扱うWEBアプリでは、json_encode()で配列を取得することはよくあるので、是非覚えておきましょう。
また、配列内の検索としても$.eachは大活躍しますので、こちらの$.eachの活用例も是非ご確認ください。
以上、jQueryのeachで配列や要素を繰り返す方法、でした。