• jQuery

    jQuery Rápido y Fácil: Que es $(this) y para que sirve

    En este tutorial aprenderemos acerca de this una función de jQuery que mayormente se usa en su faceta de selector: $(this), al seleccionar usando this lo que se hace es seleccionar al elemento que activo el evento, puede sonar confuso para explicarlo usare un ejemplo sencillo.

    Ejemplo

    Supongamos que tenemos un documento como este:

    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Ejmplo This</title>
    </head>
    <body>
    	<button>Hazme clic</button>
    	<button>Hazme clic</button>
    	<button>Hazme clic</button>
    
    	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
    	<script>
    		$(function() {
    		});
    	</script>
    </body>
    </html>

    Tenemos 3 botones y queremos que cuando se haga clic en cada uno de ellos corra un evento de jQuery, como por ejemplo cambiar el texto que esta dentro, entonces lo común que haríamos seria lo siguiente:

    		$(function() {
    			$('button').click( function (){
    				$('button').text("Hola!");
    			}); 
    		});

    Pero si vemos el resultado, notamos que el evento esta afectando a todos los botones:

    Para solucionar problemas de este tipo, se usa a this como elemento seleccionado, de esta manera hacemos que el evento corra de forma individual en cada uno de los botones, lo que tendriamos que cambiar en el codigo anterior seria:

    			$('button').click( function (){
    				$(this).text("Hola!");
    			});

    Y el resultado:

    Lo que hemos hecho es decirle a jQuery que cuando se haga clic en el elemento button corra un evento, pero que este evento corra unicamente en este/this elemento (el elemento que provoco el evento).

    Este es solo un ejemplo de los cientos de usos que le podemos dar a this, espero os haya servido este corto tutorial.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese