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节点！

摘自 徐越的专栏