Page 1 of 1

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

Posted: Tue Oct 13, 2009 12:38 pm
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 ?

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

Posted: Tue Oct 13, 2009 1:00 pm
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')...

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

Posted: Tue Oct 13, 2009 1:24 pm
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.

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

Posted: Tue Oct 13, 2009 2:16 pm
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

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

Posted: Tue Oct 13, 2009 2:25 pm
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().