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

更好地做孩子而不是找到发现有时候在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

您搜索的内容相当于jQuery中的XPath following axis。 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')

实现在初始元素之后遍历树的剩余部分。感谢Nina的评论，感受this solution的启发。与此不同，它仅基于原始操作（下一个兄弟，父母，第一个孩子）而不是递归。

jQuery - 获取下一个元素，无论DOM放置

5 个答案: