javascript - jquery:尝试理解 next() 函数

Question

我在以下 html 上使用了 jquery next() 方法:

<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>

我将以下单击处理程序添加到列表中的 anchor ，并将 current 和 next() 元素写入控制台，如下所示:

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

    console.dir($(this));

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

    console.dir(checkElement);
    }

当我单击第一个 ul 的“产品”列表项时，我在控制台中看到:

所以我可以看到第一个元素是 anchor ，下一个元素是 ul - 这对我来说很有意义。现在，当我单击第二个 ul 中的“产品”列表项时，我感到困惑。我像以前一样返回两个对象，但这次它们都是 anchor 。我认为第一个 anchor 元素将是“产品”，第二个 anchor 元素将是“公司”，因为这是列表中的下一个元素，甚至可能是 <li>包含下一个 anchor 的元素。相反，当我深入查看控制台中的对象时，它们似乎是相同的元素。两者的 text 和 textContent 字段相同:

这是为什么？

Answer 1

在第二个示例中，列表中的下一个元素不是 a anchor 的同级元素；它是其父 li 的同级。

该 Products anchor 没有 .next() 元素，您应该在控制台中看到 $(this).next() 是一个空的 jQuery 对象，.length 为零。 http://jsfiddle.net/mblase75/6LFPG/