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元素。