Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery $(this) keyword

Tags:

jquery

this

Why is it important to use $(this) instead of re-selecting the class?

I am using a lot of animate and css editing in my code, and I know I can simplify it by using $(this).

like image 778
agassi0430 Avatar asked Sep 18 '12 16:09

agassi0430


People also ask

What is jQuery $( this?

$(this) is a jQuery wrapper around that element that enables usage of jQuery methods. jQuery calls the callback using apply() to bind this . Calling jQuery a second time (which is a mistake) on the result of $(this) returns an new jQuery object based on the same selector as the first one.

Why we use $( this in jQuery?

The value of this inside a click event is a DOM element (the one that was clicked). Using $(this) converts it to a jQuery object. DOM elements do not have a hide() methods, but jQuery adds that and many other methods you can then call.

What is '$' in jQuery?

$ sign is just a valid javascript identifier which is used as an alias for jQuery. Prototype, jQuery, and most javascript libraries use the $ as the primary base object (or function). Most of them also have a way to relinquish the $ so that it can be used with another library that uses it.

When we use $( this code?

Explanation: The $(this) selector is used to select current HTML elements. 19.


2 Answers

When you perform an DOM query through jQuery like $('class-name') it actively searched the DOM for that element and returns that element with all the jQuery prototype methods attached.

When you're within the jQuery chain or event you don't have to rerun the DOM query you can use the context $(this). Like so:

$('.class-name').on('click', function(evt) {     $(this).hide(); // does not run a DOM query     $('.class-name').hide() // runs a DOM query });  

$(this) will hold the element that you originally requested. It will attach all the jQuery prototype methods again, but will not have to search the DOM again.

Some more information:

Web Performance with jQuery selectors

Quote from a web blog that doesn't exist anymore but I'll leave it in here for history sake:

In my opinion, one of the best jQuery performance tips is to minimize your use of jQuery. That is, find a balance between using jQuery and plain ol’ JavaScript, and a good place to start is with ‘this‘. Many developers use $(this) exclusively as their hammer inside callbacks and forget about this, but the difference is distinct:

When inside a jQuery method’s anonymous callback function, this is a reference to the current DOM element. $(this) turns this into a jQuery object and exposes jQuery’s methods. A jQuery object is nothing more than a beefed-up array of DOM elements.

like image 123
Phil Avatar answered Sep 24 '22 17:09

Phil


$(document).ready(function(){    $('.somediv').click(function(){    $(this).addClass('newDiv'); // this means the div which is clicked    });                         // so instead of using a selector again $('.somediv'); });                           // you use $(this) which much better and neater:=) 
like image 20
Dejo Dekic Avatar answered Sep 21 '22 17:09

Dejo Dekic