Jquery中next和children的区别

来源：互联网发布：查看电脑端口占用情况编辑：程序博客网时间：2024/04/29 22:38

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