JQuery遍历前辈元素（父辈和祖先元素）jQuery遍历父辈元素的方法，包括parent()、parents()、cl

<body>
    <ul>
        <li>我是演员
            <ul class="ul1">
                <li>普通市民刘先生
                    <p>我是星二代</p>
                </li>
                <li>平平无奇古天乐</li>
                <li>卧龙凤雏</li>
            </ul>
        </li>
        <li class="singer">我是歌手</li>
        <li class="producer">我是制片人</li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        // parent()：获取元素的父级元素
        // parents()：获取元素的祖先元素
       
        // parent只返回当前元素的一个父节点
        console.log($('p').parent())
        
        //parents会把当前元素的祖先节点全部返回,从自身往外找,找到了还会继续遍历上面的节点
        console.log($('p').parents('ul'))
        
        //closest()会返回document文档,从自身往外找,找到了就不找了
        console.log($('p').closest('ul'))
        
        /* 效率上closest比parents更好 */
        /* closest会找到靠近自己最近的一个父节点 */
        /* parents会找到自己的所有的匹配的祖先元素 */

        /* 把.singer筛选出来，添加背景*/
        $('li').filter('.singer').css('background','red');
        
        /* 排除.singer, 给除了.singer的元素添加背景颜色 */
        $('li').not('.singer').css('background','red');
        
        /* 排除多个class，用逗号分隔 */
        // $('li').not('.singer,.producer').css('background','red');
    </script>
</body>