CODEWITHSUNDEEP
jquery
omerjerk
omerjerk

Reputation: 4279

how to use 'this' in jQuery?

this is my HTML code :

<div id="staticlinks">
<a class="thumb" href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png"/></a>
<a class="thumb" href="https://www.twitter.com/" target="_blank"><img src="images/twitter.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/youtube.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/feed.png" /></a>
<a class="thumb" href="https://www.google.com/" target="_blank"><img src="images/google.png" /></a>

</div>

and this is jQuery code :

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(".thumb img", this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(".thumb img", this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

the problem is when I remove 'this' from $(".thumb img", this) then all the images gets animated. And if I put it here then the animation doesn't take place. I am not getting the problem.

Upvotes: 2

Views: 81

Answers (6)

Gabriel Santos
Gabriel Santos

Reputation: 4974

What is “this”?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

(from Wikipedia)

In jQuery, this refer to a DOM element:

$('.thumb').hover(function() {
    // $(this) refer to $('.thumb')
});

or a object:

function foo(element) {
    this.a = 'a'; // Refer to object

    element.each(function() {
         $(this).css('color', 'red');

        // now this refer to current element of each, which is a DOM element
    })
}

Upvotes: 1

jubair
jubair

Reputation: 597

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206628

$(function(){
  $('.thumb').on('mouseenter mouseleave', function( e ){
      var size = e.type=='mouseenter' ? 80 : 60 ;
      $("img", this).animate({height: size , width: size }, 800);
  });
});

Your handler was already pointed to .thumb which are the <a> elements, than you were again pointing to ANY ".thumb img", this where this was not relevant any more.
Now, by doing "img", this you're actually saying "img", children of THIS hovered which will work as expectd.
Above it's a nice way to achieve the same.

Upvotes: 2

Jai
Jai

Reputation: 74738

try this:

$("img", this)

You are hovering the .thumb so you should do it like this.

or this way:

$(this).find('img').animate({....})

Upvotes: 1

Mooseman
Mooseman

Reputation: 18891

Use $("img", this); instead of $(".thumb img", this) It will take every img under this, which is the hovered .thumb.

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 238075

$(".thumb img", this) means "find all .thumb elements within this, then find all their descendant img elements". You just want to find all the img elements within this, since this is the .thumb element.

All you need to do is $('img', this).

Note that it is rather more intuitive (and minutely faster!) to use find instead.

$(this).find('img')

This means exactly the same thing but, I think, is a little easier to read.

Upvotes: 2

Related Questions