5 JQuery.Each () Contoh Fungsi

Artikel ini membincangkan fungsi JQuery.Each () secara mendalam - salah satu fungsi yang paling penting dan biasa digunakan dalam jQuery. Kami akan meneroka kepentingannya dan belajar cara menggunakannya.

mata teras

Fungsi

jQuery.each () adalah alat pelbagai fungsi dalam jQuery yang melelehkan unsur-unsur, tatasusunan, dan objek DOM, untuk melakukan operasi DOM dan pemprosesan data pelbagai elemen.
Fungsi ini menyediakan dua mod operasi: sebagai kaedah yang dipanggil pada objek jQuery (untuk elemen DOM), dan sebagai fungsi praktikal untuk tatasusunan dan objek, setiap mod sesuai untuk pelbagai jenis struktur data.
Dengan contoh praktikal, artikel ini menunjukkan kuasa dan fleksibiliti JQuery.Each (), menyoroti kepentingannya dalam memudahkan lelaran, dan menyoroti kaedah JavaScript alternatif untuk melaksanakan tugas yang sama.

Apakah jQuery.each ()?

fungsi setiap () JQuery digunakan untuk gelung melalui setiap elemen objek sasaran jQuery - objek yang mengandungi satu atau lebih elemen DOM, dan mendedahkan semua fungsi jQuery. Ia sangat berguna untuk operasi DOM multi-elemen dan melelehkan pelbagai sifat dan sifat objek sewenang-wenangnya.

Selain fungsi ini, jQuery juga menyediakan fungsi penolong dengan nama yang sama yang boleh dipanggil tanpa pemilihan atau penciptaan unsur -unsur DOM.

jQuery.each () sintaks

Mari kita lihat aplikasi praktikal mod yang berbeza.

Contoh berikut memilih elemen

di laman web dan mengeluarkan indeks dan ID setiap elemen: <div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素 $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> hasil output yang mungkin adalah: <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;div0:header div1:main div2:footer&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Versi ini menggunakan fungsi JQuery's <p>, bukan fungsi praktikal. <code>$(selector).each()

Contoh seterusnya menunjukkan penggunaan fungsi praktikal. Dalam kes ini, objek yang akan dilengkapkan diberikan sebagai parameter pertama. Dalam contoh ini, kami akan menunjukkan cara untuk melengkapkan melalui array:

// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three

Dalam contoh terakhir, kami ingin menunjukkan bagaimana untuk melangkah ke atas sifat objek:

// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5

Semua ini beralih untuk menyediakan fungsi panggil balik yang sesuai. Konteks fungsi panggil balik

akan sama dengan parameter kedua, nilai semasa. Walau bagaimanapun, kerana konteksnya sentiasa menjadi objek, nilai asal mesti dibungkus: this

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

Ini bermakna tiada kesamaan yang ketat antara nilai dan konteksnya.

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

Parameter pertama ialah indeks semasa, iaitu nombor (untuk tatasusunan) atau rentetan (untuk objek).

1. asas jQuery.each () Contoh fungsi

mari kita lihat bagaimana fungsi JQuery.Each () digunakan bersempena dengan objek jQuery. Contoh pertama memilih semua

elemen dalam halaman dan output sifat a mereka: href

$('a').each(function(index, value){
  console.log(this.href);
});

Contoh kedua mengeluarkan setiap

luaran pada halaman web (hanya mengandaikan protokol HTTP (s)): href

$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});

Katakan terdapat pautan berikut pada halaman:

<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>

Contoh kedua akan output:

// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});

kita harus ambil perhatian bahawa elemen DOM dari objek jQuery adalah bentuk "asli" dalam fungsi panggil balik yang ia lulus ke jQuery.each (). Sebabnya ialah jQuery sebenarnya hanya pembungkus untuk tatasusunan elemen DOM. Dengan menggunakan jQuery.each (), array ini diulang dengan cara yang sama seperti array biasa. Oleh itu, kita tidak akan mendapat unsur -unsur pembungkusan keluar dari kotak.

Mengenai contoh kedua kami, ini bermakna kita boleh mendapatkan atribut this.href elemen dengan menulis href. Jika kita mahu menggunakan kaedah JQuery's attr(), kita perlu membungkus semula elemen seperti ini: $(this).attr('href').

2. jQuery.each () Contoh Array

mari kita lihat bagaimana menangani array biasa:

<code>div0:header
div1:main
div2:footer</code>

output coretan kod ini:

// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three

Tidak ada yang istimewa di sini. Arahan mempunyai indeks angka, jadi kami mendapat nombor bermula dari 0 hingga n-1 di mana n adalah bilangan elemen dalam array.

3. jQuery.each () contoh JSON

Kami mungkin mempunyai struktur data yang lebih kompleks, seperti tatasusunan dalam tatasusunan, objek dalam objek, objek dalam tatasusunan, atau array dalam objek. Mari kita lihat bagaimana jQuery.each () dapat membantu kita dalam kes ini:

// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5

Output Contoh ini:

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

Kami menggunakan panggilan bersarang ke jQuery.each () untuk mengendalikan struktur bersarang. Panggilan luaran mengendalikan pelbagai warna berubah -ubah; Dalam contoh ini, hanya ada satu kunci setiap objek, tetapi biasanya anda boleh menggunakan kod ini untuk memproses bilangan kekunci.

4. jQuery.each () Contoh kelas

Contoh ini menunjukkan bagaimana untuk gelung melalui setiap elemen productDescription kelas yang diberikan (diberikan dalam HTML di bawah):

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

Kami menggunakan setiap fungsi penolong dan bukannya setiap () kaedah pada pemilih.

$('a').each(function(index, value){
  console.log(this.href);
});

Dalam kes ini, output adalah:

$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});

kita tidak perlu memasukkan indeks dan nilai. Ini hanya parameter yang membantu menentukan elemen DOM yang sedang kita lalui. Di samping itu, dalam kes ini, kita juga boleh menggunakan kaedah yang lebih mudah. Kita boleh menulis dengan cara ini:

<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>

kita akan masuk ke dalam konsol:

<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7
https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

Perhatikan bahawa kita membungkus elemen DOM dalam contoh jQuery baru supaya kita boleh menggunakan kaedah teks jQuery () untuk mendapatkan kandungan teks elemen.

5. jQuery.each () Contoh kelewatan

Dalam contoh seterusnya, apabila pengguna mengklik elemen dengan ID 5Demo, semua item senarai akan ditetapkan ke oren dengan segera.

const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});

Selepas kelewatan yang berkaitan dengan indeks (0, 200, 400 ... MS), kami memudar elemen:

<code>0:1
1:2
2:3
3:4
4:5</code>

Kesimpulan

Dalam artikel ini, kami menunjukkan bagaimana untuk melangkah ke atas elemen, tatasusunan, dan objek DOM menggunakan fungsi JQuery.Each (). Ini adalah fungsi yang kuat dan menjimatkan masa yang pemaju harus dimasukkan ke dalam toolkit mereka sendiri.

Jika jQuery bukan pilihan pilihan anda, anda mungkin ingin mempertimbangkan menggunakan kaedah JavaScript Native Object.keys() dan Array.prototype.forEach(). Terdapat juga perpustakaan seperti Foreach yang membolehkan anda melelehkan pasangan nilai utama objek array kelas atau objek kamus.

ingat: $.each() dan $(selector).each() adalah dua kaedah yang berbeza yang ditakrifkan dalam dua cara yang berbeza.

(artikel ini dikemas kini pada tahun 2020 untuk mencerminkan amalan terbaik semasa dan mengemas kini kesimpulan tentang penyelesaian asli menggunakan JavaScript moden. Untuk mengetahui lebih lanjut mengenai JavaScript, baca buku kami JavaScript: dari orang baru hingga ninja, edisi kedua》)

soalan yang sering ditanya mengenai fungsi jQuery setiap ()

Apakah tujuan fungsi () dalam jQuery? Fungsi () dalam jQuery digunakan untuk melangkah ke atas koleksi elemen DOM dan melakukan operasi tertentu pada setiap elemen.

Bagaimana menggunakan fungsi .eech () dalam jQuery? Anda boleh menggunakan fungsi .eech () dengan memilih satu set elemen menggunakan pemilih jQuery dan kemudian memanggil .eeche () pada pemilihan itu. Anda menyediakan fungsi panggil balik yang mentakrifkan tindakan yang akan dilakukan pada setiap elemen.

Apakah parameter fungsi panggil balik yang digunakan dengan .eech ()? Fungsi panggil balik menerima dua parameter: indeks (indeks semasa elemen dalam koleksi) dan elemen (elemen DOM semasa yang diulang).

Bagaimana menggunakan parameter indeks dalam .eeche () fungsi panggil balik? Anda boleh menggunakan parameter indeks untuk menjejaki kedudukan elemen semasa dalam koleksi, yang sangat berguna untuk operasi bersyarat atau operasi lain.

Apakah beberapa kes penggunaan biasa untuk fungsi

.eech ()? Kes -kes penggunaan biasa termasuk melangkah ke atas senarai elemen untuk memanipulasi sifat, nilai, atau gaya mereka, dan melakukan tindakan tersuai pada setiap elemen dalam koleksi.

Atas ialah kandungan terperinci 5 JQuery.Each () Contoh Fungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!