Que significa esto $(this) en jquery

percysl · #1 (**permalink**) 28/07/2011, 11:55

Hola muy buenas a toda la gente de forosdelweb.com bueno como el titulo indica solo quiero saber cuando se usa esto $(this) en jquery vi como parte de un codigo aqui se los dejo muchas gracias.

form.find('input[type=button],input[type=submit]').each(function(){

var originalButton = $(this),

mtreik · #2 (**permalink**) 28/07/2011, 12:28

Si, es muy sencillo, hace referencia al "objeto" javascript que está llamando o usando la función, pero mira, te lo explico con un ejemplo muy sencillo:

Código Javascript:

Ver original$(".ejemplo").click(function() {
            $(this).hide();     
        });

Esta función será llamada siempre que hagas click en un elemento que tenga asignada la clase ejemplo y entonces la ocultará, es decir, si tienes en tu HTML 4 elementos con la clase ejemplo, solo ocultará el elemento en el que hagas click.

Espero que lo hayas entendido!!

percysl · #3 (**permalink**) 28/07/2011, 13:01

Lo entendi perfectamente, muchas gracias, bueno aun sigo en linea si tienes tiempo PORFAVOR ayudame con este codigo, gracias.

$.fn.zinePretifyForm = function(){ // esta parte no entiendo
return this.each(function(){

var form = $(this);

form.find('input[type=button],input[type=submit]').each(function(){

// esta parte no entiendo
var originalButton = $(this),
button = $('<span>',{
className : 'button',
html : originalButton.val()+'<span></span>'
});

// y esta parte no entiendo
button.insertAfter(originalButton.hide());

button.click(function(){
originalButton.click();
});

});

Gracias man por tu paciencia.

Dany_s · #4 (**permalink**) 29/07/2011, 09:25

ahi estas extendiendo el objeto jquery, el this es un objeto jquery que tiene los elementos seleccionados, por ejemplo cuando haces $('div') te va a devolver todos los div que selecciona

el return es para devolver esos elementos y poder encadenar métodos

por ejemplo

Código HTML:

Ver original<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    $( function(){
        $('#unDiv, #unSpan').colorearElementos().css("border", "1px solid #000");
    });
 
    jQuery.fn.colorearElementos = function(){
        return this.each( function() {
            $(this).css("background", "red");
        });
    };
    </script>
</head>
<body>
<div id="unDiv">el div</div>
<span id="unSpan">el span</span>
</body>
</html>

en el each recorre los elementos que fueron seleccionados, dentro del each el this hace referencia a cada uno de esos elemtos

si no retornas nada esto .css("border", "1px solid #000"); no funcionaría

insertAfter http://api.jquery.com/insertAfter/

en tu código seguramente que el método selecciona elementos form, si seleccionaron 3 form se hace un bucle por cada uno, en cada uno se hace otro para recorrer los elementos que contiene la seleccion form.find('input[type=button],input[type=submit]')