在JQuery中获取下一个元素属性

Question

我需要在悬停一系列链接时获取下一个链接的href值。我有这个：

<div id="foo">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
</div>

$( "#foo a" ).hover(function() {
    var href = $(this).next().attr('href');
    console.log(href);
});

对我来说似乎很好，但我在控制台中得到了“未定义”。

我是JQuery的新手，但不是JS。有什么想法吗？

TIA

Answer 1

next()^[docs]方法仅适用于直接兄弟姐妹。

您尚未提供HTML，因此我猜您需要使用parent()^[docs]方法或closest()^[docs]方法或其他方式遍历共同的祖先，使用{{1要遍历到下一个相邻的祖先，然后使用find()^[docs]方法获取嵌套的.next()。

Answer 2

怎么样

   $('#foo a').hover(function () {
        var href = $(this).closest('li').next().find('a').attr('href');
    });