jQuery - получает следующий элемент, независимо от размещения DOM

Question

В настоящее время у меня есть следующая структура HTML:

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

При наведении ссылки на изображение или ссылку на заголовок я хочу изменить цвет / цвет границы обоих.

Я пытался использовать фильтр next():

$('.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);

});

Это не работает, потому что next просматривает только до конца заголовка. Есть ли способ поиска следующего элемента img (из выбранного элемента, в данном случае тега <a>), независимо от размещения в DOM?

Answer 1

Попробуйте использовать

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

Answer 2

Вы можете использовать это

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

... и добавить обработку ошибок для крайних случаев

Answer 3

Если вы придерживаетесь этого формата, вы можете использовать

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

Что касается ультра общего решения, я не уверен. Я протестирую и вернусь к вам (я оставляю этот ответ в вики сообщества, если кто-то захочет отредактировать этот ответ, чтобы уточнить).

Answer 4

лучше делать детей, а не находить find иногда не работает в IE.

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

Answer 5

То, что вы ищете, является эквивалентом XPath following axis в jQuery.AFAIK изначально не поддерживается.Вы можете добавить пользовательскую реализацию в jQuery:

(function($){
    $.fn.nextElementInDom = function(selector) {
        var e = $(this);
        checkNextSubtree: while (true) {
            if (e.next().length) {
                e = e.next();
                while (!e.is(selector)) {
                    if (e.children().first().length) {
                        e = e.children().first();
                        continue;
                    } else {
                        continue checkNextSubtree;
                    }
                }
                return e;
            } else {
                if (e.parent().length) {
                    e = e.parent();
                    continue checkNextSubtree;
                } else {
                    return null;
                }
            }
        }
    };
})( jQuery );

Использование:

$('.article-preview h1 a').nextElementInDom('img')

Реализация проходит остаток дерева после начального элемента.Оно вдохновлено этим решением , найденным благодаря комментарию Нины.В отличие от этого, он основан только на примитивных операциях (следующий брат, родитель, первый ребенок) и не рекурсивен.