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

Posted 2023-02-25

【中文标题】获取 JQuery 中的下一个元素属性

【英文标题】：Get next element's attibute in JQuery

【发布时间】：2011-08-20 00:09:00

【问题描述】：

当悬停一系列链接时，我需要获取下一个链接的 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

【问题讨论】：

你确定下一个元素是a标签吗？

我来自 YUI3，初始选择器将返回一个节点列表。我想这是不同的。现在试试。

@user：$( "#foo a" ) 返回一个具有.length 属性的对象，以及由数字索引引用的匹配元素。但是在分配了.hover() 处理程序之后，该集合将被丢弃。在处理程序内部，this 只是对接收事件的单个元素的引用。可以缓存初始选择，例如在 foo_a 中，然后执行 var idx=foo_a.index(this); var href=foo_a.eq(++idx).attr('href');，但大多数人更喜欢遍历 DOM 以获取下一个元素。

【参考方案1】：

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

你还没有提供你的html，所以我只是猜测你需要使用parent()^[docs]方法或closest()^[docs]方法或其他方法遍历到一个共同的祖先，使用.next()遍历到下一个相邻的祖先，然后使用find()^[docs]方法得到嵌套的<a>。

【参考方案2】：

怎么样

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