Unable to target next div in DOM using jQuery

Question

I am currently having a little trouble using jQuery to locate the next div in the DOM. I suspect it might be due to the <div> I am targeting from, being contained within the <a> tag.

What I'm aiming for is the div class="div_name" to appear during the time the user is hovering over the 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);
});

I have been looking around and have tried the method .nextAll but to no avail. I hope somebody will be able to assist.

score 0 · Accepted Answer · answered Jun 02 '13 at 14:08

0

next() looks for siblings around the current node's parent node.

From the documentation:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

You need to do

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

answered Jun 02 '13 at 14:08

karthikr

97,368
26
197
188

Of course. I do have to clarify, however, that what has happened here is that you have told the jQuery to select the parent around the
and then to target the next element in the DOM. Is that correct?
– Jun 02 '13 at 14:18
yes.. but the .div_name will retrieve all the next siblings. You might need some more intelligent way to filter out specific divs – karthikr Jun 02 '13 at 14:19
1

The end result was $(this).parent().next('.div_name').stop().fadeToggle(600); – Jun 02 '13 at 14:22

Unable to target next div in DOM using jQuery

1 Answers1