无法使用 jQuery 定位 DOM 中的下一个 div

Question

我目前在使用 jQuery 定位 DOM 中的下一个 div 时遇到了一点麻烦。我怀疑这可能是由于我所针对的<div> 包含在<a> 标记中。

我的目标是在用户将鼠标悬停在div class="island_hover" 上时出现div class="div_name"

HTML：

<div id="interactive_map">
<a href="#"><div class="island_hover" id="1"></div></a>
    <div class="div_name" id="id1"><p>id1</p></div>
<a href="#"><div class="island_hover" id="2"></div></a>
    <div class="div_name" id="id2"><p>id2</p></div>
<a href="#"><div class="island_hover" id="3"></div></a>
    <div class="div_name" id="id3"><p>id3</p></div>
<a href="#"><div class="island_hover" id="4"></div></a>
    <div class="div_name" id="id4"><p>id4</p></div>
<a href="#"><div class="island_hover" id="5"></div></a>
    <div class="div_name" id="id5"><p>id5</p></div>
<div id="interactive_map_close"></div>

jQuery:

$('.island_hover').hover(function() {
    $(this).next('.div_name').fadeToggle(600);
});

我一直在四处寻找并尝试了.nextAll的方法，但无济于事。我希望有人能够提供帮助。

Answer 1

next() 在当前节点的父节点周围寻找兄弟节点。

来自documentation：

获取集合中每个元素的紧随其后的兄弟 匹配的元素。如果提供了选择器，它将检索下一个 仅当它与该选择器匹配时才为兄弟。

你需要做的

$('.island_hover').hover(function() {
    $(this).parent().next('.div_name').fadeIn(600);
});