¿Por qué tengo que usar $ (esto)?

Question

Duplicar posible:
jQuery $(this) vs this

En jQuery veces me parece que dentro de una función que tengo que usar $(this) porque this no funcionará:

var listItems = $('li'); 
listItems.each(function(index) { 
    $(this).css({ 

    }) 
}) 

Todas las ideas en cuanto a la razón por qué?

Answer 1

• $() es la función jQuery constructor
• this es una referencia a la DOM element of invocation

Así que, básicamente, que está girando un DOM reference en un jQuery object

En su ejemplo, usted podría también use

listItems.each(function(index, element){ 
    $(element).css({ 
    }); 
}); 

.. desde .each() pasará ambos elemento index + en su devolución de llamada.

Answer 2

this es el elemento DOM nativo. $(this) es un objeto jQuery que le permite llamar a funciones como .css() en él.

Answer 3

this es un objeto DOM por defecto, lo que significa que solo tiene los métodos en objetos DOM normales.

Si desea invocar una función de biblioteca específica (como la función de jQuery .css), usted tiene que convertir en un objeto completo jQuery primera, que es lo que $() hace por defecto si se le pasa un objeto DOM.

(También puede pasar otras cosas al $(), como una cadena HTML (para construir un nuevo objeto DOM envuelto jQuery) o un selector CSS (para obtener un conjunto de objetos jQuery que corresponden a objetos DOM que coinciden con el selector)

Answer 4

Sé que llegué un poco tarde a este hilo, pero solo quería mencionar el hecho de que el envoltorio redundante de objetos DOM es uno de los crímenes cometidos con mayor frecuencia contra jQuery. Cuidar su jQuery-instance la construcción puede tener efectos tremendos en cuanto al rendimiento y es tan fácil de hacer que no tiene excusa para no hacerlo.

Normalmente, cuando las personas tienen un objeto DOM (ya sea que se haga referencia a él) this o element) van a tratar de envolver cada vez que necesitan acceso a un método jQuery:

jQuery(this).css('a', 'b'); 

El problema es cuando estás haciendo esto varias veces:

jQuery(this).css('a', 'b'); 
jQuery(this).find('span').attr(...); 
jQuery(this).... 

Cada vez jQuery() se llama, se construye una nueva instancia de jQuery. Ese tipo de operación es costosa y debe evitarse si es posible, especialmente en bucles.

Para evitar esto, para empezar, puede utilizar el encadenamiento con todos los métodos que devuelven una instancia de jQuery $(this).css(a,b).attr(a,b)...). El resto del tiempo que debe tener una variable definida localmente que se refiere a la instancia de jQuery y luego sólo tiene que utilizar:

var self = jQuery(this); 
self.css(...); 
self.attr(...); 

Si estás haciendo esto dentro de una función de devolución de llamada .each(), todavía hay un nuevo objeto jQuery siendo construido en cada iteración. Esto se puede evitar por tener un objeto jQuery genérica que mutar continuamente y luego se puede ejecutar métodos jQuery fuera de esa única instancia:

vistazo a esto:

jQuery.single = function(a){ 
    return function(b){ 
     a[0] = b; 
     return a 
    } 
}(jQuery([1])); 

Ahora mira esto:

$('a').each(function(i){ 
    $.single(this).append('Anchor number ' + i); 
}); 

Solo se está utilizando un objeto jQuery. Puede que sea aún más rápido, evitando el identificador de resolución:

$_ = $.single; 
$('a').each(function(i){ 
    $_(this).append('Anchor number ' + i); 
}); 

Alimento para el pensamiento. Más información aquí: http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

Answer 5

Si está utilizando Firefox, pruebe console.log ($ (this)) y console.log (this) para ver la diferencia.