Heim > Artikel > Web-Frontend > Wie füge ich in JavaScript dynamisch Kommas zwischen einer Liste von Elementen hinzu?

Wie füge ich in JavaScript dynamisch Kommas zwischen einer Liste von Elementen hinzu?

WBOYnach vorne: 2023-09-08 17:33:021615Durchsuche

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

Wir können das CSS-Pseudoelement „::before“ verwenden, um vor jedem Listenelement, außer dem ersten, dynamisch ein Komma einzufügen. Indem wir auf das Listenelement abzielen und das Attribut „content“ verwenden, können wir vor dem Inhalt des Listenelements ein Komma einfügen. Darüber hinaus können wir die Pseudoklasse „:not(:first-child)“ verwenden, um sicherzustellen, dass nur für nicht erste Listenelemente Kommas hinzugefügt werden.

Angenommen, wir haben das folgende HTML-DOM:

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

In diesem Artikel besprechen wir zwei verschiedene Methoden, mit denen Sie dasselbe Endziel erreichen können: Hinzufügen eines Kommas nach jedem Listenelement außer dem letzten.

Lassen Sie uns also jede Methode einzeln besprechen.

Methode 1: CSS verwenden

Eine Möglichkeit, mithilfe von CSS dynamisch Kommas zwischen Listenelementen hinzuzufügen, besteht darin, das Pseudoelement ::before für die Listenelemente zu verwenden.

In jedem li ::before-Pseudoelement (mit Ausnahme des ersten li-Kindelements) fügen wir ein Komma ein und das sollte das Problem lösen.

Der Code dafür ist -

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

Dadurch wird vor jedem Listenelement außer dem ersten ein Komma und ein Leerzeichen eingefügt. Vor dem ersten Element steht nichts, es steht also kein Komma davor.

Methode 2: Verwendung von JavaScript

Alternativ können Sie Javascript oder JQuery verwenden, um dynamisch Kommas zwischen Listenelementen hinzuzufügen. Hier werden wir mit reinem JavaScript dynamisch Kommas zwischen einer Liste von Elementen hinzufügen.

Der Code dafür wäre -

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

Dieser Code wählt zuerst die Liste nach ID aus und ruft dann alle Listenelemente ab. Dann durchläuft es jedes Element und prüft, ob es nicht das erste Element ist. Ist dies nicht der Fall, fügt es vor dem Elementinhalt ein Komma und ein Leerzeichen ein.

Beispiel

Der letzte Code ist -

<!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>

Das obige ist der detaillierte Inhalt vonWie füge ich in JavaScript dynamisch Kommas zwischen einer Liste von Elementen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?Nächster Artikel：Wie deaktiviere ich die Dreiecksselektivität mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen