jQuery基础教程(十四)

后代是子、孙、曾孙等等。通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

常用的后代遍历方法如下：

方法	说明
children()	返回被选元素的所有直接子元素。
find()	返回被选元素的后代元素，一路向下直到最后一个后代。

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之遍历-后代</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li>
            蔬菜
            <ul class="vg">
                <li>西红柿</li>
                <li>土豆</li>
                <li>南瓜</li>
                <li id="mushroom">香菇</li>
            </ul>
        </li>
        <li>
            水果
            <ul class="fruit">
                <li>苹果</li>
                <li>草莓</li>
                <li>葡萄</li>
            </ul>
        </li>
    </ul>
</div>
<script>

    $(function(){
        $(".vg").children().each(function(i,e){
            console.log($(e).text());
        })

        $("div").find("li").each(function(i,e){
            console.log(e);
        })
    })
</script>
</body>
</html>

运行结果：