dom structure movement with jquery

I am creating a jquery script in which if a certain link element is clicked, the css of a following div changes. My problem is, that the next element is in a "parent dom tree" and I don't know how to select it.

If you take a look at my following html example you will know what mean.. ;)

<div class="box">
                        <div class="rentenBox"><a href="#" title="Info"><span class="hide">Info</span></a></div>
                        <div class="obereZeile"></div>
                        <div class="untereZeile"></div> 

</div> <!-- .box -->
<div class="blueButtonInfo"></div>

So, if the user clicks on .rentenBox a, the css of .blueButtonInfo should change.

Here is my jQuery so far:

$('.rentenBox a').click(function(event) {
                event.preventDefault();
                $(this).next('.blueButtonIn开发者_运维知识库fo').css('display', 'none');

            })

I appreciate every help. Thx! :)

The blueButtonInfo div is next to the box so you must go up 2 elements and then call next

$(this).parent().parent().next('.blueButtonInfo').css('display', 'none');

//or

$(this).parents('.box').next('.blueButtonInfo').css('display', 'none');

$(this).parent().next().css('display', 'none');

or

$(this).parent().siblings('.blueButtonInfo').css('display', 'none');

The first one will work if the div you are targeting is always after the current div's parent. The second one will always work if the div's class is blueButtonInfo.