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的“Products”列表项时，我在控制台中看到了这个： enter image description here

所以我可以看到第一个元素是锚点，下一个元素是ul-这对我来说很有意义。现在，当我点击第二个ul中的“Products”列表项时，我的困惑就出现了。我像以前一样回到了两个物体，但这一次它们都是锚。我认为第一个锚元素是“Products”，第二个锚元素是“Company”，因为它是列表中的下一个元素 - 甚至可能是包含下一个锚点的<li>元素。相反，当我向下钻取控制台中的对象时，它们看起来是相同的元素。 text和textContent字段对于两者都是相同的： enter image description here

为什么会这样？

Answer 1

在你的第二个例子中，列表中的下一个元素不是a锚点的兄弟;它是其父母li的兄弟姐妹。

Products锚点没有.next()元素，您应该在控制台中看到$(this).next()是一个零.length的空jQuery对象。 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元素。

jquery：试图理解next（）函数

3 个答案: