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>

我将以下单击处理程序添加到列表中，并将当前和next（）元素写入控制台，如下所示：

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

    console.dir($(this));

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

    console.dir(checkElement);
    }

当我单击第一个ul的“产品”列表项时，我会在控制台中看到以下内容：

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

为什么是这样？

Answer 1

在第二个示例中，列表中的下一个元素不是a锚的同级； 是其父母li的兄弟姐妹。

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

Answer 2

因此，问题在于您的锚中没有next（），它将返回null。 因此，在这种情况下，您将必须上至父级并获得下一个同级。 这是一个非常简单的示例，说明如何完成此操作。

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

Answer 3

JQuery的next（）方法将您带到所选元素的下一个同级对象。

兄弟姐妹是那些具有相同父元素的元素。 从您给定的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>

您选择的是第一个孩子。 因此，当您在第一个示例中调用next时，它将选择下一个孩子。

在您的第二个示例中，没有第二个要遍历的子级，因此它默认为空的jquery元素。