JQuery遍历的方式each、$.each、for...of

最新推荐文章于 2020-06-30 21:18:24 发布

_七七

最新推荐文章于 2020-06-30 21:18:24 发布

阅读量242

点赞数

分类专栏： JQuery 文章标签： js javascript jquery java

本文链接：https://blog.csdn.net/qq_43472877/article/details/106769094

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JS的遍历方式

for(初始化值;循环结束条件;步长)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //获取所有ul下的li
            var citys = $("#city li");
            //1.js方式遍历
            for (var i = 0; i < citys.length; i++) {
                //获取内容
                alert(i+":"+citys[i].innerHTML);
            }
    </script>

</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>成都</li>
        <li>上海</li>
        <li>天津</li>
    </ul>
</body>
</html>

JQ的遍历方式

jq对象.each(callback)

$(function () {
			//获取所有ul下的li
             var citys = $("#city li");
             
            //2.jq对象.each(callback)
            citys.each(function (index,element) {
                //获取li对象方式1 this 但是不能获取索引
                alert(this.innerHTML);
                //或
                alert($(this).html());

                //获取li对象方式2 在回调函数中定义参数 index：索引 element：元素对象
                alert(index+":"+element.innerHTML);
                //或
                alert(index+":"+$(element).html());
            })

全局遍历 $.each(object, [callback])

        $(function () {
            //获取所有ul下的li
             var citys = $("#city li");

            $.each(citys,function () {
                alert($(this).html())
            })
            
        })

for…of:

        $(function () {
            //获取所有ul下的li
             var citys = $("#city li");
             
            //JQ3.0以后的for...of
            for (li of citys){
                alert($(li).html())
            }
        })

_七七

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery遍历的方式each、$.each、for...of

JS的遍历方式for(初始化值;循环结束条件;步长)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.js"></script> <script> $(functi
复制链接

扫一扫