ホームページ > 記事 > ウェブフロントエンド > jqueryの each(callback) を使用するとどのような効果が得られますか?
jqueryの each(callback) を使用するとどのような効果が得られますか?
- 伊谢尔伦オリジナル
- 2017-06-16 15:58:481309ブラウズ
概要
一致した各要素をコンテキストとして使用して関数を実行します。
は、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素集合内での実行環境としての要素の位置を表す数値（ゼロをベースとする整数）が関数にパラメータとして渡される。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。
例は次のとおりです:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title> 遍历元素</title>
<script src="js/jQuery.js" type="text/JavaScript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
</style>
<script type="text/javascript">
$(function() {
$("img").each(function(index){
// 根据形参index 设置元素的title 属性
this.title = " 第" + index +" 幅风景图片，alt 内容是" + this.alt;
if(i==1)
return false;
})
})
</script>
</head>
<body>
<p>
<img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
<img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
<img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
</p>
</body>
</html>オブジェクトと配列を反復するために使用できる一般的な反復メソッド。
jQuery オブジェクトを反復処理する $().each() メソッドとは異なり、このメソッドは任意のオブジェクトを反復処理するために使用できます。 コールバック関数には 2 つのパラメータがあります。1 つ目はオブジェクトのメンバーまたは配列のインデックスで、2 つ目は対応する変数またはコンテンツです。各ループを終了する必要がある場合は、コールバック関数が false を返すようにすることができ、他の戻り値は無視されます。
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });結果: トムの年齢は20歳です
ジェリーの年齢は30歳です
ジムの年齢は40歳です
var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});結果: 1=1 2=2 3=3
var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});結果: 0 1 2
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});結果: 20 30 40
$.each() は $(selector).each() とは異なり、後者は jquery オブジェクトの反復カレンダー専用です。前者は、任意のコレクション (配列であってもオブジェクトであっても) を走査するために使用できます。配列の場合、コールバック関数は毎回、配列のインデックスと対応する値を渡します (値は、このキーワードは使用されますが、JavaScript は常にこの値をオブジェクト (文字列であっても数値であっても) としてラップし、メソッドはトラバースされるオブジェクトの最初のパラメーターを返します。 each() メソッドは DOM ループ構造を作成できます。簡潔で間違いが起こりにくい。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、
1 次元配列、多次元配列、DOM、JSON などをトラバースできます。 JavaScript 開発プロセス中に $each を使用する私たちの作業負担を大幅に軽減できます。
それぞれは1次元配列を処理します
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});alert(i)は0、1、2を出力します
alert(val)はaaa、bbb、cccを出力します
それぞれは2次元配列を処理します
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});arr2は2 次元配列の場合、 item はこの 2 次元配列内の各配列を取得することと同等です。 item[0] 各 1 次元配列の最初の値を取得することに対する相対値 alert(i) は 0、1、2 を出力します。この 2 次元配列には 3 つの配列要素が含まれているためです。 alert(item) は For [' を出力しますa', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']
この 2 桁の配列処理の変更
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});alert(j)は0, 1, 2, 0, 1, 2, 0, 1, 2として出力されますalert(val)はa, aa, aaa, b, bb , bbbとして出力されます、c、cc、cccそれぞれjsonデータを処理します。これはそれぞれさらに強力で、すべての属性をループできますvar obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});ここでalert(key)は1、2、3を出力しますalert(val)は1、1、を出力しますtwo、2、three、3
なぜここでキーは数値ではなく属性なのでしょうか? json 形式は順序のない属性値のセットであるため、数値はどこにあるのでしょうか?そして、この val は obj[key] に相当します
ecah は dom 要素を処理します。ここでは例として入力フォーム要素が使用されます。
<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>、それぞれを次のように使用すると
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
}); 次に、alert(val) はフォーム要素であるため [object HTMLInputElement] を出力します。 alert(i) は 0、1、2、3 を出力しますalert(val.name); は aaa、bbb、ccc、ddd を出力します、this.name を使用すると同じ結果が出力されます alert( val.value); は 111,222,333,444 を出力します。 上記のコードを次の形式に変更すると、同じ結果が出力されます。 2つの書き方の違いはどこにあるのか、まだわかりません。この変更を上記の配列操作に適用すると、同じ結果が生成されます。
以上がjqueryの each(callback) を使用するとどのような効果が得られますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。