Jquery: qu'est-ce que signifie "$ (this)"?

J'ai un programme et ça marche bien. Voir ICI .

C'est le code:

<div id="round"></div> <style> #round{ position: absolute; width: 200px; height: 200px; border-radius: 50%; left: 400px; top: 200px; background-color: #e1e1e1; } </style> <script src="jquery.js"></script> <script src="jquery.easing.1.3.js"></script> <script> $(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $("#round").animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); </script> 

Mais quand je change "#round" à "this". Cela ne fonctionnera pas. Pourquoi? (En fait, cela fonctionne, mais quand je les met dans setInterval (), cela ne fonctionnera pas)

 $(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $("#round").animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); 

Passer à «ceci», il ne fonctionnera pas.

 $(document).ready(function(){ $("#round").click(function(){ setInterval(function(){ $(this).animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); 

this est une référence au membre qui invoque la fonction actuelle …

Alors vous pouvez l'envelopper dans la fonction jquery $() pour le sélectionner tout comme vous voudriez un autre sélecteur.

Donc setInterval appelle une fonction anonyme pour qu'il ne soit pas invoqué par un membre référencé, donc il est par défaut l'objet window .

Enregistrez this contexte dans une variable, puis utilisez-le en interne comme ça …

 $(document).ready(function(){ $("#round").click(function(){ var clicked = this; //<----store the click context outside setInterval setInterval(function(){ $(clicked).animate( //<----------use it here {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); 

À l'intérieur d'une fonction d'événement lié jQuery, this réfère à l'élément DOM actuel de la collection qui est activée. Puisqu'il s'agit d'un élément DOM, le passer à jQ comme $( this ) fait une collection jQuery afin que vous puissiez faire plus de choses jQuery.

Toutefois, dans votre code modifié, vous ne l'avez pas déplacé dans une nouvelle fonction anonyme. À l'intérieur de cette fonction, this fait maintenant référence à la nouvelle portée.

Vous devez vous référer à this avant votre fonction:

 $(document).ready(function(){ $("#round").click(function(){ var jQuerizedElement = $( this ); setInterval(function(){ jQuerizedElement.animate( {height: 250, width: 150, top:150, left: 425}, {duration: 300} ). animate( {height: 200, width: 200, top:200, left: 400}, {duration: 300} ); }, 0); }); }); 

$(this) est contextuel. Chaque fonction [anonyme, dans ce cas] que vous entrez, la valeur de $(this) change. Par exemple:

 $('#round').click(function(){ alert($(this).attr('id')) // alerts round setInterval(function(){ alert($(this).attr('id')) // alerts undefined }); }); 

Ceci est fondamentalement lié au contexte. Lorsque vous dites $ (ceci) s'il s'agit d'un élément dom, il vous donnera un objet jquery associé à cet élément dom.

Parce que vous utilisez une fonction de rappel déclenchée par setInterval sur un contexte différent …

Vous pouvez gérer cela en copiant 'this' à une autre variable ex:

 var that = this: 

Et au rappel

 $(that).animate... 

Si je comprends bien, il semble que $(this) soit juste le nœud déclenché .

Par exemple, lorsque vous avez un événement de clic sur un bouton . Dans le rappel de l'événement, vous pouvez utiliser $ (ce) qui représente le nœud du bouton