[jQuery] When $(this) refers to what ?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

[jQuery] When $(this) refers to what ?

Post by Wolfie »

Hi all

I have this jQuery code :

Code: Select all

 $(document).ready(function() {    $("#menu").find('a').live("click",function() {        $('body').load("index.php", {'mailbox': $(this).attr('value'),                                     'controller' : 'mailbox',                                     'action' : 'mailbox'});    });    $(".message").find('label').live("click",function() {        $('#messages').load("index.php", {'id' : $(this).find('input').val(),                                         'controller' : 'mailbox',                                         'action' : 'message',                                         'repeat' : 'yes'});    });}); 
Here I have two functions, as u can see very similar, now the problem is that after some researches it seems that in the firs function $(this) refers to $("#menu").find('a') and in the second one $(this) refers to $('#messages').

Why am I thinking so ?

Cause I have this html code :

Code: Select all

 <div id="messages">            <div class="message">            {section name="i" loop=$parts}                    <label>{$parts[i].from}</label>                    <label>{$parts[i].id}<input type="hidden" value="{$parts[i].id}"></label>            {/section}            </div>    </div> 
And when I am trying to access the input value with second function it is impossible, but when I am changing $('#messages') to $(".message") than I am accesing input value properly, can anybody explain me what is going why is that ?

And how can I access input value without changing this part $('#messages').load ?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: [jQuery] When $(this) refers to what ?

Post by pickle »

I can't find in the docs where it says what $(this) maps to, but if I had to guess, I'd say it maps to 'body' in the first function, and '#messages" in the second. I'd solve this by retrieving the value outside the .load() call & storing that in a variable. Outside the .load() call, $(this) would refer to the <a>, and label respectively.

As far as I know, 'value' isn't a standard attribute of an <a> tag. If you use "rel", it'll be more standards compliant.

You don't need to use the find() function, these selectors should work fine:

Code: Select all

$('a','#menu')...
$('label','.message')...
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: [jQuery] When $(this) refers to what ?

Post by kaszu »

$(this) is executed in callback function scope, so 'this' refers element on which event was triggered. In first A and in second LABEL, like in normal click callbacks.

Code: Select all

$("#menu").find('a')
is the same as

Code: Select all

$("#menu a")
which is all A elements which are children of elements with id 'menu'

Code: Select all

$(".message").find('label')
same as

Code: Select all

$(".message label")
which is all LABEL elements which are children of elements with class "message"

Yout html is bad, why you have 2 label elements?

Code: Select all

<label>{$parts[i].from}</label>
<label>{$parts[i].id}<input type="hidden" value="{$parts[i].id}"></label>
Better I think would be to use SPAN if you need to separate 'from' and 'id'

Code: Select all

<label>
<span>{$parts[i].from}</span>
<span>{$parts[i].id}</span>
<input type="hidden" value="{$parts[i].id}">
</label>
This will prevent error if user clicks on first label, because in old code it didn't had input as a child.
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] When $(this) refers to what ?

Post by Wolfie »

Thanks for responses, two labels was only for testing.

I solved the problem this way :

Code: Select all

 $(".message").find('label').live("click",function() {        var self = $(this);        $('#messages').load("index.php", {'id' : self.find('input').val(),                                         'controller' : 'mailbox',                                         'action' : 'message',                                         'repeat' : 'yes'});    }); 
And after some reaserches u were right kaszu, the undefined variable apears because of two labels, now I don't have to use var self = $this when I have only one label.

Thanks
Last edited by Wolfie on Tue Oct 13, 2009 2:47 pm, edited 1 time in total.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: [jQuery] When $(this) refers to what ?

Post by pickle »

I'd like to re-iterate that you should use selectors as much as possible rather than traversing with find() - I haven't done tests, but the selector engine is almost certainly faster than find().
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply