Question

我正在尝试使用Jquery找到下一个div。这是代码：

$('.menu-item').hover(function() {
  $(this).stop(true, true).addClass("menu-item-hover", 300);
  $(this).next('div').stop(true, true).fadeIn(300);
}, function() {
  $(this).stop(true, true).removeClass("menu-item-hover", 300);
  $(this).next('div').stop(true, true).fadeOut(300);
});


<a href="media.html"><div class="menu-item"><h1>Media</h1></div></a>
<div id="tooltip-media">Sights and sounds from Cambodia</div>

<a href="about.html"><div class="menu-item"><h1>About</h1></div></a>
<div id="tooltip-about">Who in the world is the Phillips Family?</div>

简单。 toolip-* div隐藏在css中。我希望代码中的下一个显示在menu-item的悬停上。我已经检查了其他问题，但没有一个问题适合我的情况。我正在使用Jquery和Jquery UI。谢谢你的帮助。

Answer 1

试试这个

$(this).parent().next('div').stop(true, true).fadeIn(300);

在你的例子中，你试图找到下一个div，但它不是菜单项的兄弟。只有它不起作用。遍历父母并找到下一个div它将起作用。

parent()，next()

Answer 2

首先，.next()仅抓取下一个兄弟，它不会搜索所有sibilings。为此，您需要调用.nextAll('div')。但即使这个函数也不会对你有帮助，因为你要查找的<div>个节点不包含在同一个父元素中。

你应该像

一样

$( this ).parent().next( 'div[id^=tooltip]' ).stop( true, true ).fadeOut( 300 );

参考：.next()，.nextAll()

Jquery发现next（指定）元素不起作用

2 个答案: