Wie füge ich in JavaScript dynamisch Kommas zwischen einer Liste von Elementen hinzu?-js-Tutorial-php.cn

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

WBOY

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

nach vorne

1667 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!