CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Xero1
Xero1

Reputation: 329

jquery .next can't find sibling

I can't seem to get a prepended span to find its ul sibling within it's parent li...shouldn't it find it regardless if they're not the same tag?

here's the prepend, in the css it's floating to the right of the contents of the list item, but that shouldn't affect it right?

$('aside ul > li').prepend('<span class="icon-arrow-right"></span');

and here's the click function which doesn't seem to properly produce an alert:

$('aside .icon-arrow-right').click(function(){
        if($(this).next('ul').hasClass('sub-nav')) {
            alert('yes');
        } else {
            alert('no');
        }
    });

the current results of this function will always pop up a 'no' regardless if the list item has a child UL with the class sub-nav.

edit: Here's the html, please note that the js adds the span, it's not natively there:

<ul>
<li><span class="icon-arrow-right"></span><a href="#">Accommodations</a>
    <ul class="sub-nav">
        <li><span class="icon-arrow-right"></span><a href="">Inland View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Partial Ocean View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Harbor View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Ocean View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">ADA Accessible Guestroom</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Executive Suites</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Spa Terrace Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Cannery Row Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Grand Bay Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Presidential Suite</a></li>
    </ul>
</li>
<li><span class="icon-arrow-right"></span><a href="#">Hotel</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Destination</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Dining</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Spa</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Meetings &amp; Events</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Weddings</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Packages</a></li>
<li class="book-header"><span class="icon-arrow-right"></span><a href="#">Book Now</a></li>

Upvotes: 1

Views: 137

Answers (1)

Alnitak
Alnitak

Reputation: 339856

The .next() method only returns the immediate next sibling of an element, and if it doesn't match the provided selector it returns nothing.

In your case the .next() element isn't a <ul>, it's the <a> element.

To find the first matching sibling, use .nextAll('ul').first()

Upvotes: 3

Related Questions