Comment ajouter dynamiquement des virgules entre une liste d'éléments en JavaScript ?-js tutoriel-php.cn

Comment ajouter dynamiquement des virgules entre une liste d'éléments en JavaScript ?

WBOY

Libérer： 2023-09-08 17:33:02

avant

1667 Les gens l'ont consulté

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

Nous pouvons utiliser le pseudo-élément CSS « ::before » pour ajouter dynamiquement une virgule avant chaque élément de la liste, sauf le premier. En ciblant l'élément de liste et en utilisant la propriété "content", nous pouvons insérer une virgule avant le contenu de l'élément de liste. De plus, nous pouvons utiliser la pseudo-classe ":not(:first-child)" pour garantir que seuls les éléments de liste autres que les premiers sont ajoutés avec des virgules.

Supposons que nous ayons le DOM HTML suivant :

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

Copier après la connexion

Dans cet article, nous aborderons deux méthodes différentes qui peuvent être utilisées pour atteindre le même objectif final : ajouter une virgule après chaque élément de la liste sauf le dernier.

Alors, discutons de chaque méthode une par une.

Méthode 1 : Utiliser CSS

Une façon d'ajouter dynamiquement des virgules entre les éléments de la liste à l'aide de CSS consiste à utiliser le pseudo-élément ::before sur les éléments de la liste.

Dans chaque li ::avant le pseudo-élément (sauf le premier enfant li), nous ajouterons une virgule et cela devrait résoudre le problème.

Le code pour faire cela est -

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

Copier après la connexion

Cela ajoutera une virgule et un espace avant chaque élément de la liste, sauf le premier. Le premier élément n’a rien devant lui, donc il n’y a pas de virgule devant lui.

Méthode 2 : Utiliser JavaScript

Vous pouvez également utiliser javascript ou jquery pour ajouter dynamiquement des virgules entre les éléments de la liste. Ici, nous utiliserons du JavaScript pur pour ajouter dynamiquement des virgules entre une liste d'éléments.

Le code pour faire cela serait -

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

Copier après la connexion

Ce code sélectionne d'abord la liste par ID, puis récupère tous les éléments de la liste. Ensuite, il parcourt chaque élément et vérifie si ce n'est pas le premier élément, sinon il ajoute une virgule et un espace avant le contenu de l'élément.

Exemple

Le dernier morceau de code est -

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!