Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah koma secara dinamik antara senarai item dalam JavaScript?

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

WBOYke hadapan: 2023-09-08 17:33:021615semak imbas

如何在 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>

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: "";
}

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;
   }
}

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>

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!

JavaScript jquery css html 循环 dom 伪类伪元素 li

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk melumpuhkan selektiviti Triangle menggunakan FabricJS?

Artikel berkaitan

Lihat lagi