jQuery基础教程(十二)

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解释：

总结：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

遍历最常用的方法就是each() 方法规定为每个匹配元素规定运行的函数。

语法：

$(selector).each(function(index,element))

实例：

<!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 class="fruit">苹果</li>
        <li class="vg">西红柿</li>
        <li class="vg">黄瓜</li>
        <li class="fruit">草莓</li>
        <li class="vg">土豆</li>
        <li class="fruit">葡萄</li>
        <li class="vg">南瓜</li>
        <li class="vg">香菇</li>
    </ul>
    <ul>
        <li>牛奶</li>
        <li>面包</li>
        <li>香肠</li>
        <li>鸡蛋</li>
    </ul>
</div>

<script>

    $(function(){
        $("li").each(function(i,e){
            console.log("第"+i+"个元素是"+$(e).text());
        })
    })
</script>
</body>
</html>

运行结果：