Jquery - how to target only elements in the same parent div as the button that triggers the event

Just started learning Jquery - here's my problem:

I have six divs on a page. Each div contains a a link with class .开发者_开发问答arrow_trigger and an image with class .arrow_tip. Here's the HTML.

                    <div class="sixbox">

                    <img src="images/photos/box_6.jpg" width="280" height="180" alt="don´t stay in" class="leather_border">
                    <div class="wrap_arrow"><a href="what_we_do.html#report_design" class="arrow_trigger"><h2>Reports</h2></a></div> 
                    <img src="images/buttons/blue_arrow_tip.png" width="41" height="47" alt="arrow_tip" class="arrow_tip">                                      
                      <ul>
                        <li>Company reports</li>
                        <li>Datasheets</li>                    
                        <li>Corporate style development</li>                    
                        <li>Printed and delivered</li>                  
                      </ul>

                </div><!-- end sixbox --> 

I need each .arrow_trigger to animate the .arrow_tip contained in the same div. I have acheived the effect with the following code:

<script type="text/javascript">
$(document).ready(function() {
    $('.arrow_trigger').hover(function() {

                $(".arrow_tip").stop().animate({left:'190px'}, {queue:false,duration:200});
        },  
        function() {
                $(".arrow_tip").stop().animate({left: '184px'}, {queue: false, duration:200});
        });     
    });
</script>

However - with this code, all .arrow_tips are being targeted instead of just the one in the same parent div as the .arrow_trigger.

Any help greatly appreciated!

use this >

$(document).ready(function() {
    $('.arrow_trigger').hover(function() {

                $(this).parent().next(".arrow_tip").stop().animate({left:'190px'}, {queue:false,duration:200});
        },  
        function() {
                $(this).parent().next(".arrow_tip").stop().animate({left: '184px'}, {queue: false, duration:200});
        });     
    });

EDIT: Code fixed. Check working sample > http://jsfiddle.net/unHXg/1/

well i think since your are targeting a sibbling of .arrow_trigger, next() would not be my best option.

i would use jquery >1.8

//document on works on also ajax loaded content
$(document).on('hover','.arrow_trigger',function(){

  $(this).siblings('.arrow_tip').animate({left:'190px'}, {queue:false,duration:200});
  //or any other function i want to do with .arrow_tip

});

if its not a direct sibbling of .arrow_trigger then using .find() can be used

//document on works on also ajax loaded content
$(document).on('hover','.arrow_trigger',function(){

  $(this).closest('.sandbox').find('.arrow_tip').animate({left:'190px'}, {queue:false,duration:200});
  //or any other function i want to do with .arrow_tip

});

this will give you more flexible method to select as it search for all elements of the parent .sandbox regardless of location of arrow_tip or arrow_trigger.