Bagaimana untuk menambah koma secara dinamik antara senarai item dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk menambah koma secara dinamik antara senarai item dalam JavaScript?

WBOY

Lepaskan： 2023-09-08 17:33:02

ke hadapan

1668 orang telah melayarinya

如何在 JavaScript 中动态添加项目列表之间的逗号？

Kita boleh menggunakan unsur pseudo "::before" CSS untuk menambahkan koma secara dinamik sebelum setiap item senarai, kecuali yang pertama. Dengan menyasarkan item senarai dan menggunakan sifat "kandungan", kami boleh memasukkan koma sebelum kandungan item senarai. Selain itu, kita boleh menggunakan kelas pseudo ":not(:first-child)" untuk memastikan bahawa hanya item senarai bukan pertama ditambah dengan koma.

Andaikan kita mempunyai DOM HTML berikut:

<ul class="dynamic-list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

Salin selepas log masuk

Dalam artikel ini kita akan membincangkan dua kaedah berbeza yang boleh digunakan untuk mencapai matlamat akhir yang sama: menambah koma selepas setiap item senarai kecuali yang terakhir.

Jadi, mari kita bincangkan setiap kaedah satu persatu.

Kaedah 1: Gunakan CSS

Salah satu cara untuk menambah koma secara dinamik antara item senarai menggunakan CSS ialah menggunakan elemen pseudo ::before pada item senarai.

Dalam setiap li ::sebelum unsur pseudo (kecuali anak li pertama), kami akan menambah koma dan itu sepatutnya menyelesaikan masalah.

Kod untuk melakukan ini ialah -

.dynamic-list li {
  display: inline-block;
}
.dynamic-list li::before {
  content: ", ";
}
.dynamic-list li:first-child::before {
  content: "";
}

Salin selepas log masuk

Ini akan menambah koma dan ruang sebelum setiap item senarai kecuali yang pertama. Item pertama tidak mempunyai apa-apa sebelum itu, jadi tiada koma di hadapannya.

Kaedah 2: Menggunakan JavaScript

Sebagai alternatif, anda boleh menggunakan javascript atau jquery untuk menambahkan koma secara dinamik antara item senarai. Di sini kami akan menambah koma secara dinamik antara senarai item menggunakan JavaScript tulen.

Kod untuk melakukan ini ialah -

var list = document.getElementById("dynamic-list");
var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
   if (i > 0) {
      items[i].innerHTML = ", " + items[i].innerHTML;
   }
}

Salin selepas log masuk

Kod ini mula-mula memilih senarai mengikut ID dan kemudian mendapat semua item senarai. Kemudian ia melingkari setiap item dan menyemak sama ada ia bukan item pertama, jika tidak ia menambah koma dan ruang sebelum kandungan item.

Contoh

Kod terakhir ialah -

<!DOCTYPE html>
<html>
<head>
   <title>Comma Separated List</title>
</head>
<style>
   li {
      display: inline-block;
      color: black;
   }
</style>
   <body>
      <ul id="dynamic-list">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
      </ul>
      <script>
         var list = document.getElementById("dynamic-list");
         var items = list.getElementsByTagName("li");
         for (var i = 0; i < items.length; i++) {
            if (i > 0) {
               items[i].innerHTML = ", " + items[i].innerHTML;
            }
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menambah koma secara dinamik antara senarai item dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!