tatasusunan html untuk disenaraikan

Dalam HTML, tatasusunan sering digunakan untuk menyimpan dan memaparkan data. Walau bagaimanapun, memaparkan tatasusunan secara langsung akan membawa pengalaman pengguna yang buruk. Oleh itu, kita perlu menukar tatasusunan HTML kepada senarai yang lebih mesra pengguna.

Proses menukar tatasusunan HTML kepada senarai boleh dicapai menggunakan JavaScript dan jQuery. Berikut akan memperkenalkan secara terperinci kaedah pelaksanaan untuk menukar tatasusunan HTML kepada senarai.

1. Tentukan tatasusunan HTML

Pertama, kita perlu menentukan tatasusunan HTML untuk menyimpan data. Berikut ialah contoh tatasusunan HTML yang mudah:

<ul id="array">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>西瓜</li>
</ul>

Susun atur ini mengandungi 4 elemen iaitu epal, pisang, oren dan tembikai.

2. Memilih elemen tatasusunan menggunakan pemilih jQuery

Seterusnya, kita perlu menggunakan pemilih jQuery untuk memilih elemen tatasusunan. Untuk tatasusunan HTML di atas, kita boleh menggunakan kod berikut:

var arrayElements = $('#array li');

Baris kod ini akan memilih semua elemen li dan menyimpannya dalam pembolehubah arrayElements.

3. Lelaran pada elemen tatasusunan dan tukarkannya menjadi senarai

Seterusnya, kita perlu mengulangi elemen tatasusunan dan menukarnya menjadi senarai. Kita boleh melakukannya menggunakan kod berikut:

var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

Mula-mula, kita buat elemen senarai kosong. Kemudian, kami menggunakan kaedah each() untuk melintasi elemen li yang dipilih. Dalam gelung, kami mencipta item senarai baharu untuk setiap elemen li dan menambah kandungan teksnya pada item senarai. Akhir sekali, kami menambah item senarai pada elemen senarai.

4. Ganti tatasusunan asal

Akhir sekali, kita perlu menggantikan tatasusunan HTML asal dengan senarai yang baru kita buat. Kita boleh melakukan ini menggunakan kod berikut:

$('#array').replaceWith(listElements);

Kod ini akan mengambil tatasusunan HTML asal dan menggantikannya dengan elemen senarai yang baru kami buat.

Kod lengkap adalah seperti berikut:

var arrayElements = $('#array li');
var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

$('#array').replaceWith(listElements);

Dengan cara ini, kami telah berjaya menukar tatasusunan HTML kepada senarai mesra dan membentangkannya kepada pengguna.

Atas ialah kandungan terperinci tatasusunan html untuk disenaraikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!