objek jquery ke tatasusunan objek tatasusunan

Kata Pengantar

Dalam pembangunan web, jQuery, perpustakaan JavaScript yang sangat baik, sering digunakan untuk mengendalikan Model Objek Dokumen (DOM). jQuery menyediakan satu siri fungsi untuk memudahkan operasi kami, seperti memilih elemen, menambah acara, dsb. Walau bagaimanapun, apabila beroperasi dengan jQuery, kadangkala kita perlu menukar objek jQuery kepada tatasusunan JavaScript atau tatasusunan objek. Kerana dalam beberapa kes, kita perlu melintasi elemen dalam objek jQuery dan mengubah suainya.

Artikel ini terutamanya memperkenalkan cara menukar objek jQuery kepada tatasusunan dan tatasusunan objek, dan menyediakan beberapa senario aplikasi praktikal untuk rujukan pembaca.

Tukar objek jQuery kepada tatasusunan

Dalam jQuery, anda boleh menggunakan fungsi toArray() untuk menukar objek jQuery kepada tatasusunan. Fungsi ini akan menukar semua elemen dalam objek jQuery ke dalam tatasusunan JavaScript dan mengembalikan tatasusunan itu.

Sebagai contoh, katakan kita mempunyai serpihan HTML berikut:

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Kita boleh menggunakan kod berikut untuk mendapatkan semua elemen li dalam halaman ini:

var $myList = $('#myList');
var $myListItems = $myList.find('li'); // 获取所有的li元素

Sekarang, $ myListItems ialah objek jQuery. Kita boleh menggunakan fungsi console.log() untuk melihat kandungannya:

console.log($myListItems);

Dalam konsol, anda boleh melihat output seperti berikut:

[li, li, li]

Output ini menunjukkan bahawa $myListItems ialah A Objek jQuery yang mengandungi tiga elemen li, kita boleh menukarnya kepada tatasusunan JavaScript menggunakan fungsi toArray():

var myListItemsArray = $myListItems.toArray();

Kini, myListItemsArray ialah tatasusunan JavaScript yang mengandungi tiga elemen li.

Tukar objek jQuery kepada tatasusunan objek

Selain menukar objek jQuery kepada tatasusunan JavaScript, kita juga kadangkala perlu menukarnya kepada tatasusunan objek. Untuk mencapai matlamat ini, kita boleh menggunakan fungsi map(). Fungsi map() akan berulang melalui objek jQuery dan melaksanakan fungsi panggil balik pada setiap elemen, kemudian menggabungkan nilai pulangan setiap elemen ke dalam tatasusunan baharu dan mengembalikan tatasusunan itu.

Pertimbangkan contoh praktikal di bawah. Katakan kita mempunyai objek JSON yang mengandungi data pengguna seperti ini:

var users = [
  {"id": 1, "name": "Alice", "age": 23},
  {"id": 2, "name": "Bob", "age": 27},
  {"id": 3, "name": "Charlie", "age": 31},
  {"id": 4, "name": "David", "age": 19},
  {"id": 5, "name": "Emma", "age": 25},
  {"id": 6, "name": "Frank", "age": 36},
  {"id": 7, "name": "Grace", "age": 32},
  {"id": 8, "name": "Henry", "age": 41},
  {"id": 9, "name": "Ivy", "age": 28}
];

Sekarang, kita perlu membuat senarai HTML yang mengandungi nama pengguna dan umur berdasarkan data ini. Kami boleh menggunakan jQuery untuk mencipta senarai ini:

var $userList = $('<ul>');
$(users).map(function(index, user) {
  var $userListItem = $('<li>');
  $userListItem.text(user.name + ' (' + user.age + ')');
  $userList.append($userListItem);
});

Kini, kami telah mencipta senarai yang mengandungi data pengguna. Kami boleh menambah elemen senarai ini pada dokumen:

$('body').append($userList);

Dalam contoh ini, kami menggunakan fungsi map() untuk menukar data pengguna kepada tatasusunan objek, dan kemudian mencipta senarai HTML yang mengandungi maklumat pengguna.

Ringkasan

Artikel ini menerangkan cara menukar objek jQuery kepada tatasusunan JavaScript dan tatasusunan objek. Kita boleh menukar objek jQuery kepada tatasusunan JavaScript menggunakan fungsi toArray() dan menukar objek jQuery kepada tatasusunan objek menggunakan fungsi map(). Teknik ini berguna apabila menangani masalah biasa dalam pembangunan web, seperti melintasi dan mengubah suai elemen DOM dan memproses data JSON.

Atas ialah kandungan terperinci objek jquery ke tatasusunan objek tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!