SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Hi there,

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

    Code JavaScript:
    $('.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 (this) 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. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,885
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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:
    HTML Code:
    <!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. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you have other divs within your ".maps" div, and you only want to target (for example) the first, you can use :first-child
    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()
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,885
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Good point. Thanks Rémon.
    Should spend more time reading the docs

    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. #5
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 () parenthesis.

    I mean, this didn't work for me:

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


    and this did work:

    Code JavaScript:
    $('.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':

    Code JavaScript:
    $('.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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •