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

Question

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().

Others have answered, but I would like to suggest that if you follow the second example (and I think you should), you might want to rename your variable to show that it is indeed a jquery object. I do this by naming my jquery object variables with a $ at the front. ie 'var $button = $(this); $button.prop('disabled');' — ShaneBlake
– ShaneBlake, Commented Nov 15, 2011 at 16:14

njr101 · Accepted Answer · 2011-11-15 16:17:55Z

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.

Royi Namir · Accepted Answer · 2011-11-15 16:09:52Z

2

$("#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');
}

answered Nov 15, 2011 at 16:09

Royi Namir

149k145 gold badges504 silver badges833 bronze badges

3 Comments

Aaron Over a year ago

I had no idea I could just call button.attr('disabled', 'disabled') For some reason, I thought it always had to be passed as a selector to the jQuery object like $(button).attr('disabled', 'disabled')

Royi Namir Over a year ago

p.s. from now on use prop and not attr.

Aaron Over a year ago

Haha, there's another thing I didn't know they added. Just saw that it was added in 1.6. Thanks! Reading over the documentation on .prop() it seems that .attr() is still used for getting attributes like href and title, is that correct?

arb · Accepted Answer · 2011-11-15 16:11:59Z

2

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)

answered Nov 15, 2011 at 16:11

arb

7,8847 gold badges35 silver badges67 bronze badges

3 Comments

Aaron Over a year ago

Thanks. Your code is definitely superior to what I had since I don't really need that variable, but I was just trying to figure out what the difference was between those two cases.

arb Over a year ago

Did I explain what the difference was thoroughly enough?

Aaron Over a year ago

Yeah, makes perfect sense. I understand when to use each case now.

Keith Walton · Accepted Answer · 2011-11-15 16:10:23Z

1

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');

answered Nov 15, 2011 at 16:10

Keith Walton

5,3948 gold badges42 silver badges54 bronze badges

Comments

James Johnson · Accepted Answer · 2011-11-15 16:23:37Z

0

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";

edited Nov 15, 2011 at 16:23

answered Nov 15, 2011 at 16:13

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related