ホームページ > 記事 > ウェブフロントエンド > JQueryでの$.eachの使い方と$(selector).each()との違い
JQueryでの$.eachの使い方と$(selector).each()との違い
- 伊谢尔伦オリジナル
- 2017-06-17 14:37:47988ブラウズ
each() メソッドを使用すると、DOM ループ構造を簡潔にし、エラーが発生しにくくなります。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、1 次元配列、多次元配列、DOM、JSON などをトラバースできます。JavaScript 開発プロセス中に $each を使用すると、次のことが可能になります。私たちの作業負担を大幅に軽減します。
each() メソッドの例:
var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});実際、arr1 は 2 次元配列 であり、item はそれぞれの 1 次元配列を取得することと等価であり、
item[0] はそれぞれの最初の値を取得することと等価です-次元配列
したがって、上記のそれぞれの出力は次のようになります: 1 4 7
長さ属性を含む配列および疑似配列オブジェクト (疑似配列オブジェクトなど) を走査するために使用できる一般的な走査関数です。関数の引数オブジェクトとして) 0 から length-1 までの数値インデックスを使用してトラバースします。他のオブジェクトはプロパティを通じてトラバースされます。
$.each() は $(selector).each() とは異なります。 jquery オブジェクトの走査に特化しており、前者は任意のコレクション (配列であってもオブジェクトであっても) を走査するために使用できます。配列の場合、コールバック関数は配列のインデックスと対応する値をそれぞれ渡します。 time (値は this キーワードを通じて取得することもできますが、javascript は常にラップされます。this 値はオブジェクトです (文字列 または数値であっても))、メソッドは反復されたオブジェクトの最初のパラメーターを返します。
例:————配列を渡す
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 0: 52 1: 97
例:————マップがコレクションとして使用される場合、コールバック関数は毎回1つのキーと値のペアを渡します
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var map = {
‘flammable': ‘inflammable',
‘duh': ‘no duh'
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 flammable: inflammable duh: no duh
例:————コールバック 関数内で false を返した場合は、$.each() を終了できます。 false 以外の値を返すと、for ループ で continue を使用したのと同じようになり、すぐにループに入ります。次の走査
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
p#five { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<p id=”one”></p>
<p id=”two”></p>
<p id=”three”></p>
<p id=”four”></p>
<p id=”five”></p>
<script>
var arr = [ "one", "two", "three", "four", "five" ];//数组
var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
jQuery.each(arr, function() { // this 指定值
$(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two
return (this != “three”); // 如果this = three 则退出遍历
});
jQuery.each(obj, function(i, val) { // i 指向键, val指定值
$(“#” + i).append(document.createTextNode(” – ” + val));
});
</script>
</body>
</html>// 输出 Mine is one. – 1 Mine is two. – 2 Mine is three. – 3 - 4 - 5
例:————配列項目を走査し、インデックスと値を渡します
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});
</script>
</body>
</html>
例: --- オブジェクトのプロパティを走査し、キーと値を渡します
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
</script>
</body>
</html>
コメントの例
1. 最初の 1 つの項目を出力したくない場合 (retrun true を使用)、次の反復に入ります
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue' with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
</script>
</body>
</html>
以上がJQueryでの$.eachの使い方と$(selector).each()との違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。