Jquery中next和children的區別

next找的是同級的節點，children找的是子節點
 
<div>
        <ul>
            <li class="first"><a href="#">這是一級菜單1</a>
                <ul>
                    <li class="second"><a href="#">這是二級菜單11</a></li>
                    <li class="second"><a href="#">這是二級菜單12</a></li>
                </ul>
            </li>
            <li class="first"><a href="#">這是一級菜單2</a>
                <ul>
                    <li class="second"><a href="#">這是二級菜單21</a></li>
                    <li class="second"><a href="#">這是二級菜單22</a></li>
                </ul>
            </li>
        </ul>
    </div>
 
 
jquery代碼如下
$(document).ready(function(){
    $("li.first").hover(function(){
        $(this).children("ul").slideDown();   找到的是表示標黑的ul節點
    },
    function(){
        $(this).children("ul").slideUp();
    });
});
 
 
如果改成$(this).next("ul")，則找不到，因為沒有和它同一級的ul節點！

摘自 徐越的專欄