If you're seeing this message, it means we're having trouble loading external resources on our website.

Si vous avez un filtre web, veuillez vous assurer que les domaines *. kastatic.org et *. kasandbox.org sont autorisés.

Contenu principal

Révisions : les collections jQuery et les boucles

Les collections jQuery

Quand on utilise jQuery pour trouver des éléments, jQuery retourne un objet collection jQuery :
var $titre = $('h1');
C'est une pratique classique de commencer les noms de variables par un signe $ pour signifier qu'elles contiennent des objets collection jQuery. Cela aide à les distinguer des variables qui contiennent des nœuds du DOM.
Si on souhaite retrouver le nœud du DOM à partir de l'objet jQuery, alors on peut considérer l'objet jQuery comme un tableau et utiliser la notation avec crochets :
var titre = $titre[0];
Si on souhaite transformer un nœud du DOM en objet jQuery, on peut le passer dans la fonction jQuery :
var $titre = $(titre);

Boucler sur des collections

Si vous souhaitez boucler sur les différents éléments d'une collection, vous pouvez utiliser une boucle for classique ou la méthode jQuery each() :
$("p").each(function(index, element) { 
    $(elem).text($(element).text() + " !!"); 
);
Quand on appelle la fonction each(), on doit lui passer une 'fonction de retour'. jQuery va donc appeler cette fonction de retour pour chaque élément de la collection, en lui passant l'index courant, et l'élément, en arguments.
jQuery va aussi définir le contexte de la fonction avec l'élément courant, ce qui signifie qu'on peut référencer l'élément avec le mot-clé this :
$("p").each(function() { 
    $(elem).text($(this).text() + " !!"); 
);

Vous souhaitez rejoindre la discussion ?

  • blobby green style l'avatar de l’utilisateur Kamdemkg
    Why don't you have the correction of the challenge?
    (3 votes)
    Default Khan Academy avatar l'avatar de l’utilisateur
  • blobby green style l'avatar de l’utilisateur khaoula mahfoudhi
    j'ai pas trouver la solution de défi : le langage bouclant
    (1 vote)
    Default Khan Academy avatar l'avatar de l’utilisateur
    • blobby green style l'avatar de l’utilisateur Lou Casenaz
      Hello, voila la solution détaillée:

      // Répéte pour chaque paragraph , appel la fonction toPigLatin dessus
      var $paragraphs = $("p"); // trouve tous les tags : <p> $paragraphs.each(function(index,element) {
      // Répéte encore pour chaque paragraphe
      var $paragraph = $(element); // Transforme le dans la bibliothèque jQuery en tant qu'objet donc tu rajoutes : .text()
      $paragraph.text( toPigLatin($paragraph.text()) );//change le texte pour pig latin
      });
      (3 votes)
  • blobby green style l'avatar de l’utilisateur Jean Bellefeuille
    $paragraphs = $("p");
    $paragraphs.each(function(index, element) {
    var $paragraph = $(element);
    $paragraph.html( toPigLatin($paragraph.html()));
    } On me dit qu'il y a une erreur d'exécution.

    $paragraphs = $("p");
    for (var i = 0; i < $paragraphs.length; i++) {
    var element = $paragraphs[i];
    var $paragraph = $(element);
    $paragraph.html( toPigLatin($paragraph.html()));
    } Happy dit good étape réussi, mais le texte ne devrais t-il pas changé? Qu-est-ce qui m'échappe?
    (1 vote)
    Default Khan Academy avatar l'avatar de l’utilisateur
Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.