jQuery $(this) vs. variable

Question

Given:

var element = $('#element');

I'm wondering which is faster:

element.click(function(){
    element.dosomething()
)}

Or:

element.click(function(){
    $(this).dosomething()
)}

Or does it matter?

Answer 1

Use element.

If element was a jQuery collection matching a single element, for example, $(someId), then just use it.

If the selector was meant to match more than one element, then element is actually elements, a collection of elements, so, in that case you use $(this) inside your click handler to catch the one actually clicked.

The difference is explained int he following examples:

1- Handler on single element

var table = $("#myTable");
table.click(function() {
    // Same as $(this), except $(this) creates another
    //  wrapper on the same object (which isn't too expensive anyway)
    table.doSomething();
});

2- Handler on multiple elements

var rows = $("#myTable > tbody > tr");
rows.click(function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

3- Handler on single element, but called for multiple child elements

var table = $("#myTable");
// "on" and "live" call handler for only child elements matching selector
// (Even child elements that didn't exist when we added the handler, 
     as long as parent -table in this case- exists)
table.on("click", "tbody > tr", function() {
    // Here we have to use $(this) to affect ONLY the clicked row
    $(this).doSomething();
});

I find it assuring (and less work, a very tiny difference though) to just the existing wrapper, showing that I'm expecting a single element in this case and I'm just working with it. And use $(this) when I'm dealing with elements of a collection of matching elements.