recherche

Maison  >  Article  >  interface Web  >  jquery remplace le contenu de li

jquery remplace le contenu de li

WBOY
WBOYoriginal
2023-05-08 21:20:36748parcourir

jQuery est une bibliothèque JavaScript très populaire utilisée pour simplifier la manipulation de documents HTML et la gestion des événements. L'une des opérations courantes consiste à remplacer le contenu d'un élément de liste HTML (li). Dans cet article, nous expliquerons en détail comment utiliser jQuery pour réaliser cette opération.

Tout d'abord, nous avons besoin d'un document HTML de base contenant une liste non ordonnée, chaque élément de la liste contenant du contenu textuel. Voici un exemple de document HTML : 

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
</body>
</html>

Dans le code HTML ci-dessus, nous avons inclus un lien jQuery CDN (Content Delivery Network). Ce lien nous permettra d'écrire du code JavaScript localement en utilisant jQuery.

Maintenant, nous allons écrire du code jQuery pour remplacer le contenu du deuxième élément de la liste. Tout d’abord, nous devons ajouter un attribut ID unique au deuxième élément de la liste afin de pouvoir le référencer dans jQuery. Voici l'exemple de code pour ajouter l'attribut ID au deuxième élément de la liste : Exécuter uniquement après le chargement du document. Nous utilisons ensuite le sélecteur $('#list-item-2') pour sélectionner l'élément de liste avec l'ID "list-item-2" et remplaçons son contenu par le "contenu remplacé" à l'aide de la méthode html().

Nous allons maintenant voir que le texte du deuxième élément de la liste a été remplacé par "contenu remplacé".

Si nous voulons remplacer le contenu de plusieurs éléments de liste à la fois, nous pouvons utiliser la méthode each() de jQuery. Voici un exemple de code pour remplacer le contenu des 2ème et 4ème éléments de la liste par un nouveau texte : 

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 替换 li 内容</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li id="list-item-2">列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
  <script>
    $(document).ready(function() {
      $('#list-item-2').html('替换后的内容');
    });
  </script>
</body>
</html>

Dans le code ci-dessus, nous créons une nouvelle variable newItemText contenant le texte à remplacer. Nous sélectionnons ensuite les 2e et 4e éléments de la liste à l'aide du sélecteur $('#list-item-2, #list-item-4') et exécutons la fonction pour chaque correspondance à l'aide de la méthode .each(). Dans cette fonction, nous remplaçons le contenu de l'élément de liste par un nouveau texte.

Pour résumer, dans cet article nous avons appris comment remplacer le contenu des éléments de liste HTML (li) à l'aide de jQuery. Que vous remplaciez un seul élément de liste ou plusieurs éléments de liste à la fois, cela peut être fait en utilisant la méthode html() et la méthode each() de jQuery. Nous pouvons désormais facilement manipuler des éléments dans des documents HTML pour offrir une meilleure expérience utilisateur à nos utilisateurs.

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 html 事件 选择器 li
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery sauter la page sans actualiserArticle suivant：jquery sauter la page sans actualiser

Articles Liés

Voir plus