Question

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

我的目标是在用户将鼠标悬停在div class="div_name"

上时显示div class="island_hover"

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);
});

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

1 个答案: