jQuery对象的四种遍历方式

最新推荐文章于 2023-03-22 08:25:42 发布

csdn_wuhg

最新推荐文章于 2023-03-22 08:25:42 发布

阅读量606

点赞数

分类专栏： jQuery 文章标签： jQuery jQuery的四种遍历

本文链接：https://blog.csdn.net/qq_44127968/article/details/96497901

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery对象的四种遍历方式

一、最基本的遍历方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            var $city = $("#city li");
            for (var i = 0; i < $city.length; i++) {
                var cityObj = $city[i];
                alert(cityObj.innerText);
            }
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

二、对象函数遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#city li").each(function (index, element) {
                alert(index + "---" + element.innerText);
            })
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

三、全局函数遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $.each($("#city li"),function (index, element) {
                alert(index + "---" + element.innerText);
            })
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

四、jQuery3.0版本后的遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            for (li of $("#city li")){
                alert(li.innerText);
            }
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>