010,Jquery循环遍历

最新推荐文章于 2024-04-19 16:12:43 发布

V哥学It

最新推荐文章于 2024-04-19 16:12:43 发布

阅读量124

点赞数 2

分类专栏： Jquery小白入门到精通文章标签： jquery js javascript java javaweb

本文链接：https://blog.csdn.net/weixin_39032063/article/details/116423953

版权

Jquery小白入门到精通专栏收录该内容

15 篇文章 4 订阅

订阅专栏

Jquery循环遍历

V哥官网：http://www.vgxit.com

本博客对应视频教程：http://www.vgxit.com/course/19

1，概述

jquery按照标签名，或者类名等获取到的数据有可能有多个。那么我们需要对这些对象进行遍历。

2，for循环遍历

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery循环遍历</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var ps = $("p");
                for (var i = 0; i < ps.length; i++) {
                    alert($(ps[i]).text());
                }
            });
        </script>
    </head>
    <body>
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
    </body>
</html>

3，jquery对象的each遍历

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery循环遍历</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var ps = $("p");
                ps.each(function () {
                    alert($(this).text());
                });
            });
        </script>
    </head>
    <body>
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
    </body>
</html>

上面我们用this来获取每次遍历的元素对象。其实，我们还可以通过毁掉方法中传入参数的方式来实现。回调方法可以接收两个参数。一个是index(索引)，还有一个是element(元素对象)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery循环遍历</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var ps = $("p");
                ps.each(function (index, element) {
                    alert(index + ":" + $(element).text());
                });
            });
        </script>
    </head>
    <body>
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
    </body>
</html>

4，$.each的方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery循环遍历</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var ps = $("p");
                $.each(ps, function () {
                    alert($(this).text());
                });
            });
        </script>
    </head>
    <body>
        <p>1111</p>
        <p>2222</p>
        <p>3333</p>
    </body>
</html>

V哥学It

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
010,Jquery循环遍历

Jquery循环遍历V哥教育QQ群：673215016官网：http://www.vgxit.com1，概述jquery按照标签名，或者类名等获取到的数据有可能有多个。那么我们需要对这些对象进行遍历。2，for循环遍历<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery循环遍历<
复制链接

扫一扫