Panduan untuk menggunakan kaedah $each() dalam jquery_jquery

$.each() berbeza daripada $(selector).each() digunakan khas untuk melintasi objek jquery yang pertama boleh digunakan untuk melintasi mana-mana koleksi (sama ada tatasusunan atau objek). Jika ia adalah tatasusunan, fungsi panggil balik akan Lulus dalam indeks tatasusunan dan nilai yang sepadan (nilai juga boleh diperolehi melalui kata kunci ini, tetapi JavaScript akan sentiasa membungkus nilai ini sebagai objek - sama ada ia rentetan atau nombor), dan kaedah akan mengembalikan objek yang dilalui.

setiap() boleh menjadikan struktur gelung DOM ringkas dan kurang terdedah kepada ralat. Fungsi each() merangkumi fungsi traversal yang sangat berkuasa dan sangat mudah digunakan. Ia boleh melintasi tatasusunan satu dimensi, tatasusunan berbilang dimensi, DOM, JSON, dll.
Menggunakan $each semasa proses pembangunan JavaScript boleh mengurangkan beban kerja kami dengan banyak.

Berikut ialah beberapa kegunaan biasa setiap satu

setiap memproses tatasusunan satu dimensi

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});

amaran(i) akan mengeluarkan 0, 1, 2
alert(val) akan mengeluarkan aaa, bbb, ccc

Setiap satu mengendalikan tatasusunan dua dimensi

　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
alert(i); 
alert(item); 
　　});

arr2 ialah tatasusunan dua dimensi dan item adalah bersamaan dengan mengambil setiap tatasusunan dalam tatasusunan dua dimensi ini.
item[0] adalah relatif kepada mengambil nilai pertama dalam setiap tatasusunan satu dimensi
alert(i) akan mengeluarkan 0, 1, 2 kerana tatasusunan dua dimensi ini mengandungi 3 elemen tatasusunan
makluman(item) akan dikeluarkan sebagai ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

Selepas mengubah sedikit pemprosesan tatasusunan dua digit ini

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) akan mengeluarkan 0, 1, 2, 0, 1, 2, 0, 1, 2

alert(val) akan dikeluarkan sebagai a, aa, aaa, b, bb, bbb, c, cc, ccc

setiap memproses data json, ini setiap satu lebih berkuasa, ia boleh melingkari setiap atribut

　　var obj = { one:1, two:2, three:3}; 
　　each(obj, function(key, val) { 
　　alert(key); 
　　alert(val); 
　　});

Di sini amaran(kunci) akan mengeluarkan satu dua tiga
alert(val) akan mengeluarkan satu, 1, dua, 2, tiga, 3
Mengapa kunci di sini bukan nombor tetapi atribut Kerana format json ialah satu set nilai atribut yang tidak tersusun, di manakah nombornya?
Dan val ini bersamaan dengan obj[key]

ecah memproses elemen DOM Di sini, elemen borang input digunakan sebagai contoh.

Jika anda mempunyai sekeping kod seperti ini dalam dom anda

<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"/>

Kemudian anda gunakan setiap satu seperti berikut

$.each($("input:hidden"), function(i,val){ 
alert(val);
alert(i);
alert(val.name);
alert(val.value); 
});

Kemudian, alert(val) akan mengeluarkan [objek HTMLInputElement] kerana ia adalah elemen bentuk.

makluman(i) akan mengeluarkan 0, 1, 2, 3

alert(val.name); akan mengeluarkan aaa, bbb, ccc, ddd. Jika this.name digunakan, hasil yang sama akan dikeluarkan
alert(val.value); akan mengeluarkan 111,222,333,444 Jika anda menggunakan this.value, hasil yang sama akan menjadi

Jika anda menukar kod di atas ke dalam borang berikut

$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value); 
});

Seperti yang anda lihat, hasil keluaran adalah sama bagi perbezaan antara kedua-dua kaedah penulisan, saya belum tahu lagi. Perubahan ini akan menghasilkan hasil yang sama apabila digunakan pada operasi tatasusunan di atas.

Dengan cara ini, keputusan sebenar beberapa contoh telah dijawab. Kemudian teruskan belajar, anda tidak boleh tahu apa yang berlaku dan mengapa.

Daripada contoh di atas, kita dapat melihat bahawa kedua-dua objek jQuery dan jQuery melaksanakan kaedah ini Untuk objek jQuery, setiap kaedah hanya diwakilkan: objek jQuery dihantar sebagai parameter pertama kepada setiap kaedah jQuery.

Lihat pelaksanaan setiap satu dalam jQuery (petikan Internet)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
其中callback是类似于 function(index, elem) { ... } 的方法。
所以就得到 $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}

jquery secara automatik akan membuat pertimbangan berdasarkan elemen masuk, dan kemudian menggunakan kaedah memohon atau memanggil berdasarkan keputusan penghakiman. Dalam pelaksanaan fn, anda boleh terus menggunakan penunjuk ini untuk merujuk sub-elemen tatasusunan atau objek.

1.obj objek ialah tatasusunan

setiap kaedah akan memanggil fungsi fn satu demi satu pada sub-elemen dalam tatasusunan sehingga keputusan dikembalikan dengan memanggil sub-elemen tertentu adalah palsu Dalam erti kata lain, kita boleh memprosesnya dengan fungsi fn yang disediakan buat ia memenuhi syarat tertentu. Hanya keluar dari setiap panggilan kaedah. Apabila setiap kaedah menyediakan parameter arg, parameter yang diluluskan oleh panggilan fungsi fn ialah arg, jika tidak: indeks sub-elemen, sub-elemen itu sendiri

2.obj objek bukan tatasusunan

Perbezaan terbesar antara kaedah ini dan 1 ialah kaedah fn akan dilaksanakan satu demi satu tanpa mengambil kira nilai pulangan. Dalam erti kata lain, semua sifat objek obj akan dipanggil oleh kaedah fn, walaupun fungsi fn mengembalikan palsu. Parameter yang diluluskan dalam panggilan adalah serupa dengan 1.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.