Bagaimana untuk melintasi koleksi jquery

jQuery ialah perpustakaan JavaScript popular yang menjadikan kerja dengan dokumen HTML dan elemen DOM lebih mudah, lebih pantas dan lebih mudah untuk diselenggara. Pemilih dan kaedah pengendaliannya membolehkan pembangun mengakses dan mengendalikan elemen pada halaman dengan cepat, meningkatkan kecekapan pembangunan pembangun. Dalam pembangunan, kita selalunya perlu memproses kumpulan elemen pada halaman, seperti mengubah suai atribut mereka, menambah atau memadam nod, dll. Pada masa ini, kita perlu menggunakan traversal koleksi jQuery untuk melaksanakan operasi kelompok. Jadi, bagaimana untuk melintasi koleksi jQuery?

Koleksi jQuery ialah tatasusunan yang terdiri daripada objek elemen DOM, yang boleh diperoleh melalui pelbagai pemilih. Seperti berikut:

var $list = $('ul li'); // 获取所有ul下的li元素

Selepas mendapat objek jQuery, kita boleh menggunakan beberapa kaedah yang disediakan oleh jQuery untuk melintasi koleksi untuk mencapai kesan yang kita inginkan. Berikut ialah beberapa kaedah traversal koleksi jQuery yang biasa digunakan:

1. each()

each() kaedah digunakan untuk melintasi tatasusunan atau objek, ia boleh mengulangi $list diperoleh di atas 🎜>Koleksi, melaksanakan fungsi yang ditentukan pada setiap elemen.

Sintaks:

$.each(array, function(index, value) {
  // 处理函数体
});

Kod sampel:

$list.each(function(index) {
  console.log(index + ": " + $(this).text());
});

Antaranya, parameter kaedah each() ialah fungsi yang akan digunakan untuk setiap lelaran dalam setiap( ) kaedah dilaksanakan pada elemen. Fungsi ini menyediakan dua parameter:

• index: indeks unsur semasa.
• value: Nilai unsur semasa. Kaedah

2. map()

map() juga boleh digunakan untuk merentasi tatasusunan Ia menukar satu tatasusunan kepada tatasusunan lain dan mengembalikan tatasusunan selepas dilaksanakan fungsi tersebut.

Sintaks:

$.map(array, function(value, indexOrkey) {
  // 处理函数体
});

Kod sampel:

var newArr = $list.map(function(index) {
  return $(this).text();
});
console.log(newArr);

3. filter()

filter() kaedah digunakan untuk menapis koleksi yang memenuhi Elemen yang menentukan syarat. Ia boleh menentukan sama ada untuk memasukkan elemen dalam koleksi baharu berdasarkan nilai yang dikembalikan oleh fungsi panggil balik.

Sintaks:

$(selector).filter(function(index){
  // 处理函数体
});

Kod sampel:

var $filtered = $list.filter(function(index) {
  return $(this).hasClass('active');
});
console.log($filtered);

Kaedah filter() akan mengembalikan elemen yang memenuhi syarat Elemen ini boleh menjadi objek yang sama dengan elemen dalam koleksi asal , atau objek jQuery baharu. Kaedah

4. not()

not() mengecualikan elemen yang ditentukan daripada koleksi dan mengembalikan koleksi baharu yang tidak mengandungi elemen yang ditentukan.

Sintaks:

$(selector).not(selector);

Kod sampel:

var $notFiltered = $list.not('.disabled');
console.log($notFiltered);

not()Kaedah ini juga boleh menerima fungsi sebagai parameter, yang akan dijalankan pada setiap elemen jika dikembalikan Jika nilainya benar, elemen tersebut akan disertakan dalam koleksi baharu. Kaedah

var $notFiltered = $list.not(function(index) {
  return $(this).hasClass('active');
});
console.log($notFiltered);

5. find()

find() menapis semua elemen turunan dalam koleksi semasa dan mengembalikan koleksi elemen yang sepadan dengan pemilih yang ditentukan.

Sintaks:

$(selector).find(selector);

Kod sampel:

var $found = $list.find('a');
console.log($found);

Dalam contoh ini, kita melihat bahawa jQuery menyediakan pelbagai kaedah untuk mengulangi koleksi, yang menjadikannya lebih mudah untuk memproses sesuatu jQuery collection , menulis kod adalah lebih mudah. Memandangkan kaedah ini diwarisi daripada Array.prototype dan Object.prototype, ia berfungsi dalam jQuery dengan cara yang sama seperti JavaScript asli. Jadi, setelah anda menguasainya, anda bukan sahaja boleh bekerja dengan koleksi pada jQuery, tetapi juga menggunakannya untuk beroperasi dalam JavaScript asli.

Atas ialah kandungan terperinci Bagaimana untuk melintasi koleksi jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!