jquery: Trying to understand the next() function

Question

I was using the jquery next() method on the following html:

<div id="NavBar">

    <div class="dropDownList">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Products</span></a>
                <ul>
                    <li><a href="#"><span>test</span></a>
                    <li><a href="#"><span>test</span></a>
                </ul>
            </li>
            <li><a href="#"><span>Company</span></a>
            </li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>

    <div class="dropDownList">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Products</span></a>
            </li>
            <li><a href="#"><span>Company</span></a>
            </li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>
</div>

I added the following click handler to anchors in the list and wrote the current and next() element to the console like so:

$('.dropDownList > ul > li > a').click(function() {

    console.dir($(this));

    var checkElement = $(this).next();

    console.dir(checkElement);
    }

When I click the "Products" list item of the first ul I see this in the console:

So I can see the first element is the anchor and the next is the ul- this makes sense to me. Now my confusion comes in when I click the "Products" list item in the second ul. I get back two objects like before, but this time they are both anchors. I thought that the first anchor element would be "Products" and the second would be "Company" because that is the next element in the list- or maybe even the <li> element containing the next anchor. Instead when I drill down into the objects in the console they appear to be the same element. The text and textContent field is the same for both:

Why is this?

Answer 1

In your second example, the next element in the list is not a sibling to the a anchor; it's a sibling to its parent li .

That Products anchor has no .next() element, and you should see in your console that $(this).next() is an empty jQuery object with zero .length . http://jsfiddle.net/mblase75/6LFPG/

Answer 2

So the problem is that in your a anchor has no next() it will return null. So in that case you will have to go up to the parent and get the next sibling. Here is a really quick rough example on how it can be done.

var CheckElement;
if($(this).next().length != 0){
     checkElement = $(this).next();
}
else{
     checkElement = $(this).parent().next();
}

Answer 3

the JQuery next() method brings you to the next sibling of the selected element.

Siblings are those that elements that have the same parents. From your given html

        <li><a href="#"><span>Products</span></a>          //child of 'li'
            <ul>        <----------------------------------//child of 'li'
                <li><a href="#"><span>test</span></a>      
                <li><a href="#"><span>test</span></a>
            </ul>
        </li>

What you selected was the first child. So when you called next in the first example it selected the next child.

In your second example there is no second child to traverse therefore it defaults to an empty jquery element.