jQuery select next div

Question

so code looks like this: How can I change div1 when hovering over current link1 ?

<ul>
    <li>
        <a class='link1'></a>
        <a class='link2'>
            <div class='div1'></div>
            <div class='div2'></div>
        </a>
    </li>
    <li>
        <a class='link1'></a>
        <a class='link2'>
            <div class='div1'></div>
            <div class='div2'></div>
        </a>
    </li>
</ul>

I tried like this:

$(".link1").hover(
function () {
        $(this).nextAll('.div1').css('display','block');
        ...
    },

    function () {
        ...
    }
);

Answer 1

.next and .nextAll only search the "direct siblings". The element you want is a child of the link's sibling.

You can try this:

$(this).next('.link2').children('.div1')

Or, you can travese to the parent and search all decendants:

$(this).parent().find('.div1')