CODEWITHSUNDEEP
jqueryvariablesobjectjquery-selectors
Aaron
Aaron

Reputation: 10848

Confused on different usage scenarios of a jQuery object and a JavaScript variable

I am confused on the differences between these two code blocks:

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
}

$("#someButton").click(function() {
    var button = $(this);
    $(button).attr('disabled', 'disabled');
}

Notice the difference of what the button variable stores. What's the point of storing $(this) into the button variable instead of just this? In the end, I am still using $(button).jQueryMethod() to manipulate it, not button.jQueryMethod().

Upvotes: 3

Views: 104

Answers (5)

James Johnson
James Johnson

Reputation: 46047

You would need to use $(this) if you want to use the jQuery API on the element. In your example you're just trying to get the element though, so both approaches would work.

simply getting the element though, so both techniques would work.

When to use $(this):

var button = $(this).css({ "border" : "1px solid red" });

When you can just use this:

var button = this.style.border = "1px solid red";

Upvotes: 0

njr101
njr101

Reputation: 9619

The difference isn't that significant in your example as you are only using the wrapped JQuery object once. This issue becomes more relevant if you need to use the JQuery object many times.

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
    $(button).someJQueryMethod();
    ...
    $(button).someOtherJQueryMethod();
}

In this case it is better to wrap the object once and cache the results. It is a convention to cache the result in a variable starting with a $ sign to indicate that it contains a wrapped JQuery object.

$("#someButton").click(function() {
    var $button = $(this);
    $button.attr('disabled', 'disabled');
    $button.someJQueryMethod();
    ...
    $button.someOtherJQueryMethod();
}

This way the call to $() is only invoked once. This becomes particularly relevant if the reference is inside a loop.

Upvotes: 2

arb
arb

Reputation: 7863

In sample 1, button is a regular DOM object because on click callbacks, this just points to a regular DOM object, not a jQuery object. This is fine if you do not plan on doing any additional jQuery operations on this. However, you are disabling the button in the next line using a jQuery call to .attr(). I would use the second block written like this:

$("#someButton").click(function() {
    $(this).attr('disabled', 'disabled');
}

That way you can eliminate an extra variable that you don't seem to be using and also remove an extra query operation for $(button)

Upvotes: 2

Keith Walton
Keith Walton

Reputation: 5364

In the second case, you can do this:

button.attr('disabled', 'disabled');

It is common to name jQuery variables with a $ prefix:

var $button = $(this);

$button.attr('disabled', 'disabled');

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148524

$("#someButton").click(function() {
    var button = $(this);
    $(button).attr('disabled', 'disabled');
}

is redundant

becuase you make jquery Twice !.

$("#someButton").click(function() {
    var button = $(this);
   button .attr('disabled', 'disabled');
}

Upvotes: 2

Related Questions