Tukar tatasusunan jquery kepada koleksi senarai

Dalam pembangunan bahagian hadapan, kami sering menggunakan perpustakaan jQuery untuk memudahkan beberapa operasi, dan menukar tatasusunan kepada koleksi senarai juga merupakan salah satu operasi biasa. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menukar tatasusunan kepada koleksi senarai.

1. Gunakan kaedah jQuery.each()

kaedah jQuery.each() boleh merentasi tatasusunan dan menambah setiap elemen pada koleksi senarai baharu. Berikut ialah kod sampel:

var arr = [1, 2, 3, 4, 5];
var list = $('<ul>'); // 创建一个空的<ul>元素
$.each(arr, function(index, value) {
  var li = $('<li>').text(value); // 创建一个<li>元素，并将数组中的值作为文本内容添加到<li>中
  list.append(li); // 将<li>添加到<ul>中
});
$('body').append(list); // 将<ul>添加到页面中

Dalam kod di atas, kita mula-mula mencipta elemen ul kosong, dan kemudian menggunakan kaedah each() untuk melintasi tatasusunan Semasa proses traversal, cipta elemen li dan tambah tatasusunan ke Nilai dalam ditambah sebagai kandungan teks pada li, dan akhirnya li ditambah pada elemen ul. Akhir sekali, kami menambah elemen ul pada halaman.

2. Gunakan kaedah jQuery.map()

kaedah jQuery.map() boleh menukar tatasusunan kepada tatasusunan atau objek baharu. Kita boleh menggunakan kaedah ini untuk menukar setiap elemen dalam tatasusunan kepada elemen li, dan kemudian menambah elemen li ini kepada koleksi senarai baharu. Berikut ialah contoh kod:

var arr = [1, 2, 3, 4, 5];
var listItems = $.map(arr, function(value) {
  return $('<li>').text(value);
});
var list = $('<ul>').append(listItems);
$('body').append(list);

Dalam kod di atas, kami mula-mula menggunakan kaedah map() untuk menukar setiap elemen dalam tatasusunan kepada elemen li dan menyimpan elemen li ini dalam tatasusunan baharu. Kami kemudian mencipta elemen ul kosong dan menambah setiap elemen li dalam tatasusunan kepada elemen ul. Akhir sekali, kami menambah elemen ul pada halaman.

3. Gunakan jQuery untuk melaksanakan enjin templat

jQuery boleh menukar tatasusunan kepada koleksi senarai melalui enjin templat. Kita boleh menggunakan enjin templat untuk menukar setiap elemen tatasusunan kepada rentetan HTML dan menambah rentetan HTML ini kepada koleksi senarai baharu. Kelebihan menggunakan enjin templat ialah anda boleh mengawal kandungan HTML keluaran dengan lebih fleksibel. Berikut ialah kod sampel:

var arr = [1, 2, 3, 4, 5];
var template = '<li>{value}</li>'; // 模板字符串
var listItems = $.map(arr, function(value) {
  return template.replace('{value}', value); // 使用模板字符串替换值
});
var list = $('<ul>').append(listItems);
$('body').append(list);

Dalam kod di atas, kami mentakrifkan rentetan templat dan menggunakan kaedah map() untuk menggantikan setiap elemen dalam tatasusunan dengan pembolehubah nilai dalam rentetan templat. Kami kemudian membuat koleksi senarai baharu menggunakan rentetan HTML yang dijana oleh templat dan menambahnya pada halaman.

Ringkasan

Dalam pembangunan bahagian hadapan, menukar tatasusunan kepada koleksi senarai ialah salah satu operasi yang sangat biasa. Artikel ini memperkenalkan cara menggunakan kaedah each() jQuery, kaedah map() dan enjin templat untuk mencapai operasi ini. Menggunakan jQuery membolehkan kami memproses data tatasusunan dengan lebih mudah dan cepat menukarnya kepada elemen HTML.

Atas ialah kandungan terperinci Tukar tatasusunan jquery kepada koleksi senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!