jquery: ¿qué significa exactamente "$ (this)"?

Question

Tengo un programa y funciona bien. Ver HERE.

Este es el código:

<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> 

Pero cuando cambio "#round" a "este". No funcionará ¿por qué? (en realidad funciona, pero cuando me los puse en setInterval(), no va a funcionar) el cambio

$(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); 
    }); 
}); 

a "este", no va a funcionar.

$(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); 
    }); 
}); 

Answer 1

this es una referencia al miembro que invoca la función actual ...

continuación, se puede envolver en la función jQuery $() para seleccionarlo como lo haría con otro selector.

Así que setInterval llama a una función anónima por lo que no es invocada por un miembro referenciable, por lo que se predetermina al objeto window.

guardar el contexto this en una variable y luego lo utilizan internamente como esto ...

$(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); 
    }); 
}); 

Answer 2

$(this) es context sensitive. Cada función [anónima, en este caso] que ingresa, cambia el valor de $(this). Por ejemplo:

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

Answer 3

Puesto que está utilizando una función de devolución de llamada que se dispara por setInterval en un contexto diferente ...

puede manejar esta copiando 'esto' a otro ex variables:

var that = this: 

Y en la devolución de llamada

$(that).animate... 

Answer 4

Dentro de una función de evento jQuery unido, this se refiere al elemento DOM actual de la colección que está siendo operado. Como es un elemento DOM, pasarlo a jQ como $(this) lo convierte en una colección jQuery para que pueda hacer más cosas jQuery en él.

En su código modificado que no funciona, sin embargo, lo movió a una nueva función anónima. Dentro de esa función, this ahora se refiere al nuevo alcance.

que necesita para obtener una referencia a this antes de que su función:

$(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); 
    }); 
}); 

Answer 5

esto es básicamente contexto relacionado. Cuando dice $ (this) si se trata de un elemento dom, le dará un objeto jquery asociado con este elemento dom.

Answer 6

Si entiendo bien parece que $(this) es sólo el nodo que era triggerd.

Por ejemplo, cuando tiene un clic evento en un botón. En la devolución de llamada del evento, puede usar $ (esto) que representa el nodo del botón ...