jQuery this selector

Question

I did a little Googling, and I couldn't find more information about the $(this). I feel a little silly asking, but I am want to know how exactly does it work. I think I read that it turns the element into an object, but I couldn't find additional information on this. If anyone could provide resources, it would be great.

I am actually trying to understand this question that I asked earlier: How can I fade only 1 div on mouseover when the classes applies to 5 other divs?

I just want a thorough explanation for what is happening any why did it work $(this).

in those examples there are serveral divs, so `$(this)` is used to target the hovered div and not the others. — Eric Fortis, Jul 17 '11 at 05:41
I would also recommend some further reading about `this` - [More than you ever wanted to know about `this`](http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal/134149#134149) — andyb, Jul 17 '11 at 06:13
@andyb Thanks, this is the kind of stuff that I wanted to read. — Strawberry, Jul 17 '11 at 06:17

score 2 · Answer 1 · answered Jul 17 '11 at 05:42

this is a special work in JS. It stands for "the context I am in at the current moment." So, in your example, this referred to the specific div which had the test class that currently had the mouse over it (wow, confusing there... see below). $() is a wrapper around an object which returns a jQuery object instead of the element directly.

So,

$("div.test").mouseenter assigns a listener so that when a mouse enters the div it fires
this inside of that function refers to the specific div entered.
$() always returns a jQuery augmented version of whatever is inside the parens.

score 1 · Answer 2 · answered Jul 17 '11 at 05:43

1

this talks about the owner. So in your question earlier, you had

$(".test").mouseenter(function() {
    $(this).fadeOut("slow");
}).mouseleave(function() {               
    $(this).fadeIn("slow");
});

And why this works is because you can think of it essentially as a pointer to the specific object that's calling the function. When you have a string as a selector, it will match every element of that selector. But this uniquely points at one object. And then when you add $() around it, it will select that SPECIFIC object that invoked the event.

I would take a look at this for a good article.

answered Jul 17 '11 at 05:43

vinceh

3,490
1
21
24

I read the article, and you said "And then when you add $() around it, it will select that SPECIFIC object that invoked the event." Wouldn't that mean `.test` was the owner and that would make `.test` `fadeIn` and `fadeOut` when I want `.innerDiv` to `fadeIn` and `fadeOut`? – Strawberry Jul 17 '11 at 08:57
I really liked this article, by the way. – Strawberry Jul 17 '11 at 09:17

score 1 · Answer 3 · answered Jul 17 '11 at 06:20

I just want a thorough explanation for what is happening any why did it work $(this).

Here you go.

Functions in JavaScript are called in a context. They are, in fact, standalone and only loosely coupled to the objects they belong to. It is perfectly possible to call a function that "belongs" to to object B in the context of object A, as confusing as it might be at first.

The this keyword transports the context for the function call. It contains the object the function has been called on.

function test() {
  alert(this);
}
// when called in a browser, this will alert "DOMWindow"

When no special context is given, the global context (in form of the window object, when it comes to JavaScript in a browser) is the default.

var x = [1, 2, 3, 4];

function test2() {
  alert(this.push);
}
// this will alert "undefined"
// (as there is no "push" property on the window object)

But as I said, you can change the context a function is called in. The function that does that is aptly named call() and accepts a parameter that determines the meaning of this in the function body:

test2.call(x);
// this will alert "function push() { [native code] }"
// (as the "push" property on x happens to be a function)

Now, this is very useful and jQuery does it a lot:

$(".test");       // returns an array of elements of CSS class "test"

$(".test").click( // binds a callback for the "click" event on all of them
  function () {
    // note how there is no context given for the callback function
    alert(this);
  }
);

When the click event occurs, the callback function you gave is invoked by jQuery like this

callback.call(affectedDOMElement)

And, magically, the this keyword has a useful meaning in the callback function body.

score 0 · Answer 4 · answered Jul 17 '11 at 05:39

"this" is a javascript thing that can be fairly confusing, here's an in-depth discussion: http://alebelcor.blogspot.com/2011/07/this-keyword-in-javascript.html

In the context of your other post, this just refers to the element that you clicked on. By calling the $() function with this as an argument, you're just getting the jQuery-fied object of the element you clicked on.

score 0 · Answer 5 · answered Jul 17 '11 at 05:43

this within a jQuery event callback usually refers to the DOM element being acted upon.

For example:

$('a.foobar').click(function() {
    alert(this.href);
});

By wrapping this in $(...), you are turning it in to a jQuery object that references (in the example) the clicked link.

jQuery this selector

5 Answers5

Linked