HOWTO · jQuery
jQuery で for ループを使用する
このチュートリアルでは、jQuery で for ループを使用する方法を示します。
このページの内容
jQuery は for ループをサポートしていますが、これはコア JavaScript の機能です。jQuery には、配列とオブジェクトの両方を反復処理できるメソッド each() があります。
このチュートリアルでは、jQuery で for ループを使用する方法を示します。
jQuery で for ループを使用する
jQuery の each() メソッドは、JavaScript の for ループと同様に機能します。each() メソッドは、配列とオブジェクトを反復処理できます。
一方、JavaScript でオブジェクトを反復処理するには、for in ループを使用する必要があります。JavaScript の for ループの例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="DemoPara"></p>
<script>
const Demo_Array = ["Delftstack1", "Delftstack2", "Delftstack3", "Delftstack4", "Delftstack5", "Delftstack6"];
let Demo_String = "";
for (let i = 0; i < Demo_Array.length; i++) {
Demo_String += Demo_Array[i] + "<br>";
}
document.getElementById("DemoPara").innerHTML = Demo_String;
</script>
</body>
</html>
上記のコードは、JavaScript の for ループを使用して配列メンバーを出力します。出力を参照してください：
JavaScript For Loop
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
each() メソッドは、配列とオブジェクトの両方に対してこの操作を実行することもできます。each() メソッドの構文は次のとおりです。
.each( function )
function は一致した要素ごとに実行され、each() メソッドを使用して DOM ループ構造のエラーが発生しにくくします。DOM 要素を反復処理します。
jQuery の each() メソッドの例を試してみましょう。これは、jQuery の each() メソッドを使用した JavaScript の for ループに似た例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each() Method</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var Demo_Array = ["Delftstack1", "Delftstack2", "Delftstack3", "Delftstack4", "Delftstack5", "Delftstack6"];
$.each(Demo_Array, function(index, value){
$("#DemoDiv").append(value + '<br>');
});
});
</script>
</head>
<body>
<h2>JQuery Each() Method</h2>
<div id="DemoDiv"></div>
</body>
</html>
上記のコードの出力は次のとおりです。
JQuery Each() Method
Delftstack1
Delftstack2
Delftstack3
Delftstack4
Delftstack5
Delftstack6
これは、div 要素を反復処理する each() メソッドの別の例です。例を参照してください：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each() Method</title>
<style>
div {
color: black;
text-align: center;
cursor: pointer;
font-weight: bolder;
width: 500px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>Hello, This is Delftstack</div>
<div>Demo to Iterate Over Divs</div>
<div>Click here to iterate over Divs</div>
<div>Www.delftstack.com</div>
<script>
$( document.body ).click(function() {
$( "div" ).each(function( x ) {
if ( this.style.color !== "lightblue" ) {
this.style.color = "lightblue";
}
else {
this.style.color = "green";
}
});
});
</script>
</body>
</html>
上記のコードは div を繰り返し、クリックすると色が変わります。出力を参照してください：
ループのある時点で反復を停止したい場合はどうなりますか？これは、jQuery の each() メソッドでも可能です。
特定の反復で false を返すことができます。例を参照してください：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Each Method</title>
<style>
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 4px blue solid;
text-align: center;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="StopChanging"></div>
<div></div>
<div></div>
<div></div>
<h2></h2>
<button>Click here to Change Colors</button>
<script>
$( "button" ).click(function() {
$( "div" ).each(function( DivIndex, DivElement ) {
$( DivElement ).css( "backgroundColor", "lightblue" );
if ( $( this ).is( "#StopChanging" ) ) {
$( "h2" ).text( "Stopped at div number #" + DivIndex );
$( "#StopChanging" ).text( "STOP" );
return false;
}
});
});
</script>
</body>
</html>
上記のサンプルコードは、ID を持つ特定の div が反復で来るまで、すべての div の背景色を変更します。指定された反復で停止します。
出力を参照してください：
