Elusive (this)... I'm sure it's piece of cake

JavaScript
1

Hi there,

Simple one (I hope). I have this jquery code:

$('.maps').hover(function() {$(".maps > div").animate({top:'-192px'},200)},
		       function() {$(".maps > div").animate({top:'2px'},150)});

It’s a simple content-hover effect making a div - .maps > div - slide up to show some extra info when hovering over .maps. Since I have three different instances of .maps, when I hover over any of them, I have the .animate effect running in all three of them at the same time. I guessed COLOR=“#0000FF”[/COLOR] would sort the thing out, but I don’t seem to be able to find the right place, or way to insert it in my code. Any tips?

Thx and kind regards.

2

Hi,

I would use this.find("div") to apply the animation to the appropriate div.
“this” will then reference whichever instance of the “.maps” div you are hovering over and apply the animation effect to all divs contained within it.
If you have other divs within your “.maps” div, and you only want to target (for example) the first, you can use :first-child

Here’s a quick example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery this</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      .maps{width:200px; padding:10px; background:red; margin-bottom:15px;}
      .maps > div{border:1px solid black; margin-bottom:5px}
    </style>
  </head>

  <body>
    <div class="maps">
      <div>Inner div</div>
    </div>

    <div class="maps">
      <div>Inner div</div>
      <div>Inner div</div>
    </div>
    <script>
      $(document).ready(function() {
        $('.maps').hover(function() {
          $(this).find("div:first-child").css("background", "green")
        });
      });
    </script>
  </body>
</html>

HTH

3

Or you could use .children, which is probably a better idea than .find() anyway because it doesn’t travel all the way down and is therefore faster than .find() :slight_smile:

4

Good point. Thanks Rémon.
Should spend more time reading the docs :rolleyes:

From: http://api.jquery.com/find/
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

5

Hi again,

Thx both for your answers. I actually tried the thing using .find and I didn’t make it work. Turns out, or, it seems if you’re using .find (or .search for that matter) only one selector cam go within the next COLOR=“#0000FF” parenthesis[/COLOR].

I mean, this didn’t work for me:

$('.maps').hover(function() {$(this).find(".maps div").animate({top:'-192px'},200)},
		       function() {$(this).find(".maps div").animate({top:'2px'},150)});

and this did work:

$('.maps').hover(function() {$(this).find("div").animate({top:'-192px'},200)},
		       function() {$(this).find("div").animate({top:'2px'},150)});

Or maybe using .find(“.maps div”) after selecting .maps was returning some kind of redundant result, and then, not working.
Fortunately, in this case there’s only one div children of .maps.

Anyway, .children did work as well, so here´s the final code available for future ‘investigations’:

$('.maps').hover(function() {$(this).children("div").animate({top:'-192px'},200)},
						 function() {$(this).children("div").animate({top:'2px'},150)})

Again, thx a million for your help.