J’espère que ce guide rapide vous aidera à clarifier ces moments de confusion, car une fois que vous avez saisi le truc, c’est simple comme bonjour.

C’est quoi  «this» ?

Dans de nombreux langages de programmation orientée objet,  « this »  est un mot-clé qui peut être utilisé dans les méthodes d’instance pour se référer à l’objet sur lequel la méthode en cours d’exécution a été invoquée.

Et dans JQuery alors ?

Il ya deux principaux contextes d’utilisation de «this» dans jQuery. Le premier se réfère à un élément DOM, et le second à un objet jQuery.

Exemple dans un élément DOM

«This» est un élément DOM lorsque vous êtes à l’intérieur d’une fonction callback (dans le cadre de jQuery), par exemple, être appelé par un click, each, bind, etc…

Le code suivant recherche pour des liens avec la classe «newTarget» et définit une «target= “_NEW” (c’est une astuce pour créer XHTML strict, tout en ayant certains liens s’ouvrent dans une nouvelle fenêtre).

Dans cet exemple, nous allons également effectuer une double vérification afin de s’assurer que des liens vers le même domaine ne s’ouvrent pas dans une nouvelle fenêtre en utilisant l’objet « this ».

$('a.newTarget').each(function() { // <- notre callback
// verification de l’attribut ‘host’ du DOM sur l’objet ‘this’
if (this.host != window.location.host) {
// creation d’un objet jQuery utilisant l’element DOM courant
$(this).attr('target', '_new');
}
});

Exemple en tant qu’objet jQuery

«This» est un objet jQuery lorsque vous êtes dans vos fonctions. Notez que le résultat d’une requête de sélection (ie $ (‘a’)) est un objet jQuery, qui est un tableau des éléments DOM correspondant (imaginez jQuery est un tableau avec des grelots).

jQuery.fn.newTarget = function () (
// «This» est un objet jQuery pour l’instant - avec toutes les fonctions jQuery
this.each return(function () (/ / retour afin de ne pas rompre la chaîne <br />// Maintenant, nous sommes à l'intérieur d'une fonction jQuery, l'élément DOM est le contexte
// donc «this» a changé pour devenir un élément DOM.
if (this.host! = window.location.host) (
$(This). Attr ('cible', '_new');
)
));
);

Pour terminer

Ca n’est pas très simple, et pas très logique. Tant que vous vous rappelez le contexte de «this» et des changements lors du déplacement dans et hors de vos méthodes de vos objets, tout va bien.

Si vous n’êtes pas sûr, utilisez Firebug et ajouter «console.log (this)” dans votre code d’interroger et de comprendre ce «this» est à un point précis de votre code.