Question

I have seen the use of $(this) and understand within the function, but also have seen in a selector as well, but fail to understand when or if it is valuable. Here are two examples I can use and get to work, but am I really doing anything valuable…

Here I added $(this) in selectors

(function($) {
    $(".deliver").on('mouseenter',function(){
        $(this).css({'width':'600px'});
        $(".form_jquery",$(this)).fadeIn(1000).css({'display':'block'});
        $(".componentheading",$(this)).css({'display':'none'});
    }); ...

Here is my original script

(function($) {
    $(".deliver").on('mouseenter',function(){
        $(this).css({'width':'600px'});
        $(".form_jquery").fadeIn(1000).css({'display':'block'});
        $(".componentheading").css({'display':'none'});
    });

I have kept what I know as the standard use of (this) in both and noting that I am using in a anonymous function in case this factors in.

Answer 1

$(".componentheading",$(this))

only searches the .componentheading elements under the current $(this) element (in this particular case it’s a .deliver which you entered the mouse) whereas

$(".componentheading")

searches them in the whole document.

http://api.jquery.com/jQuery/#jQuery1