jQuery - Get next element, regardless of DOM placing

Question

I currently have the the following HTML structure:

<div class="article-preview">
    <h1><a href="">Title</a></h1>
    <a class="pic-link" title="" href=""><img src="" /></a>
<div/>

When the image link or the heading link is hovered, I want to change the color/border-color of both.

I tried to use the next() filter:

$('.article-preview h1 a').mouseover(function(){
    $(this).animate({
        color: "#94c4c1"
    }, 10); 
    $(this).next('img').animate({
        borderTopColor: '#94c4c1',
        borderRightColor: '#94c4c1',
        borderBottomColor: '#94c4c1',
        borderLeftColor: '#94c4c1'
    }, 200);
});
$('.article-preview h1 a').mouseout(function(){
    $(this).animate({
        color: "#000000"
    }, 200);
    $(this).next('img').animate({
        borderTopColor: 'white',
        borderRightColor: 'white',
        borderBottomColor: 'white',
        borderLeftColor: 'white'
    }, 200);

});
$('.article-preview a img').mouseover(function(){
    $(this).animate({
        color: "#94c4c1"
    }, 10); 
    $(this).parent().find('a:first').animate({
        borderTopColor: '#94c4c1',
        borderRightColor: '#94c4c1',
        borderBottomColor: '#94c4c1',
        borderLeftColor: '#94c4c1'
    }, 200);
});
$('.article-preview h1 a').mouseout(function(){
    $(this).animate({
        color: "#000000"
    }, 200);
    $(this).parent().find('a:first').animate({
        borderTopColor: 'white',
        borderRightColor: 'white',
        borderBottomColor: 'white',
        borderLeftColor: 'white'
    }, 200);

});

This doesn't work, because next only looks in the until the end of the heading. Is there a way to search for the next img element (from the selected element, in this case the <a> Tag), regardless of the placing in the DOM?

Answer 1

Try using

$('.article-preview h1 a').hover(function() {
    $(this).parent().next('a').find('img').animate({
        borderTopColor: 'yellow',
        borderRightColor: 'yellow',
        borderBottomColor: 'yellow',
        borderLeftColor: 'yellow'
    }, 200);
});

Answer 2

You could use this

function getNextElement(currElement, className)
{
    var elements = $('.' + className);
    var currentIndex = elements.index(currElement);
    return elements[currentIndex + 1];
}

... and add error handling for edge cases

Answer 3

Assuming you are sticking with this format, you could use

$(this).parent('h1').next('a').find('img').animate({...})

As for the ultra general solution, I'm not sure. I'll test and get back to you (I leave this answer as community wiki if anyone wishes to edit this answer to elaborate).