Comment changer les éléments HTML avec jQuery

WThere sont quelques façons de changer déjà des éléments HTML existants avec jQuery, en fonction de ce que vous voulez changer. Par exemple, disons que vous vouliez changer le texte des éléments de la page que vous venez de travailler sur.

Au lieu d'avoir chaque élément dire «Voici», vous voulez dire "Point". Vous pouvez ajouter un ID à chaque élément et ensuite modifier le code HTML avec le html () ou la text () fonction. Mais cela semble beaucoup de travail. Et il crée un autre problème si le HTML change quelque part le long du chemin.

Une autre façon est de parcourir chaque élément de la liste et de les changer. jQuery a sa propre façon de boucle, appelé each (). La each () Procédé de boucle a un avantage sur le tandis que et pour boucles: Le each () fonction peut être utilisée avec jQuery ainsi vous obtenez le plein avantage de toutes les fonctions jQuery et vous pouvez enchaîner le each () fonction avec d'autres fonctions jQuery.

Chaînage est le terme utilisé pour décrire avec jQuery ce que vous faites lorsque vous vous connectez fonctions avec des points afin de rendre la fonction applique à la chaîne.

Avec seulement deux éléments à changer, vous auriez probablement juste faire cela dans le code HTML lui-même, mais cet exemple montre le processus et les fonctions pour changer HTML de sorte que vous pouvez l'utiliser lorsque vous avez vraiment besoin.

Cette liste montre le HTML et javascript pour cet exemple.

jQuery

Ajout HTML

  • Voilà 1
  • Voilà 2

Le javascript et jQuery ici montre quelques nouvelles choses, donc l'air un peu plus près le code.




La première ligne du nouveau code est la suivante:

$ ("# theList li"). chaque fonction (() {

Cette ligne utilise un sélecteur de trouver tous

  • éléments à l'intérieur de l'ID la liste. Voilà un peu différent que les autres sélecteurs vous voyez et représente comment jQuery peut utiliser la hiérarchie de la page pour accéder uniquement les éléments que vous souhaitez.

    La each () fonction est changé sur le sélecteur et met en place une fonction anonyme. À ce stade, vous savez que le code va commencer une boucle à travers chaque

  • à l'intérieur de l'élément identifiant de la liste.

    La prochaine ligne de code ressemble à ceci:

    . var existingText = $ (this) .text substr () (7,1) -

    Ce code définit une variable plaine javascript, existingText, et il établit égal au résultat de $ (this) .text (). substr (7,1). Mais qu'est-ce cela, ou est plus appropriée, $ (this)? Le sélecteur spéciale $ (this) fait référence à l'élément courant en cours d'élaboration. javascript a un équivalent appelé ce, mais vous voulez la version jQuery, de sorte que vous envelopper dans le signe du dollar / parenthèses notation.

    La $ (this) sélecteur est enchaîné à l'jQuery text () fonction, qui récupère le texte des éléments, sans balisage HTML, juste le texte. La text () fonction est alors enchaîné à la substr () fonction. La substr () fonction attrape une chaîne, ou une partie d'une chaîne, et le renvoie.

    Dans ce cas, vous voulez substr () à vous rendre un caractère unique à partir de la septième place. Vous pouvez le faire parce que vous savez que chaque élément commence avec le mot Voici suivi d'un espace, comme ceci:

    Voilà 1

    Comptage des caractères de la gauche, il ya six caractères Voilà plus un caractère pour l'espace. Cela fait sept ans, si vous vous retrouvez avec substr (7,1). Certes, cela rompt quand vous arrivez à dix points parce que vous êtes seulement renvoyer un seul caractère.

    Vous pourriez fantaisie cela en utilisant une expression régulière, que vous avez pas encore vraiment passé du temps sur, donc pour cet exemple, le laisser tel quel. Bon, si vous devez le savoir, vous pourriez remplacer le substr () avec la fonction rencontre() fonctionne, et il devrait ressembler à ceci:

    var existingText = $ (this) .text MATCH () (/ [d] /). -

    Retour à la réalité et l'exemple, la dernière ligne de code ressemble à ceci:

    $ (this) .text ("Item" + existingText) -

    Cette ligne appelle simplement la text () fonction, mais au lieu de renvoyer le texte, cette fois, vous réglez-le "Item" + existingText. Parce que vous avez le numéro de l'article dans la variable existingText, il est comme vous l'ajoutant.

    Une page vue dans un navigateur ressemble à celui-ci.

    image0.jpg

    » » » » Comment changer les éléments HTML avec jQuery