Maison > Article > interface Web > Comment ajouter dynamiquement des virgules entre une liste d'éléments en JavaScript ?

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

WBOYavant: 2023-09-08 17:33:021610parcourir

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

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

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

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>

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!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?Article suivant：Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?

Articles Liés

Voir plus