JS遍历与JQuery遍历

最新推荐文章于 2024-04-17 15:55:02 发布

一言之意

最新推荐文章于 2024-04-17 15:55:02 发布

阅读量155

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44307094/article/details/110495820

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS遍历

语法：

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

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>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</body>
</html>

JS代码：

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

            //2.遍历li
            for (var i=0; i < citys.length; i++){
                //获取内容
                alert(i+":"+citys[i].innerHTML);
            }

这种方式可以直接使用break语句和continue语句

例如：

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

            //2.遍历li
            for (var i=0; i < citys.length; i++){
                //跳过上海
                if("上海" == citys[i].innerHTML){
                    continue;
                }
                //到广州时跳出循环
                if("广州" == citys[i].innerHTML){
                    break;
                }

                //获取内容
                alert(i+":"+citys[i].innerHTML);
            }

JQuery遍历

Jquery有三种遍历方式

一、jquery对象.each(function(index,element){})

jq对象.each(callback)

语法：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象
2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

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>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</body>
</html>

JS代码：(this方式)

 	var citys = $("#city li");
    citys.each(function () {
     // 获取li对象 第一种方式 this
     alert(this.innerHTML);
     });

JS代码：（回调函数方式）

JQuery方式不能使用语法break和continue。用返回值代替实现

var citys = $("#city li");
citys.each(function (index,element) {
    //获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）

    if("上海" == $(element).html()){
        //如果当前function返回为false，则结束循环(break)。
        //如果返回为true，则结束本次循环，继续下次循环(continue)
        return true;
    }
    alert(index+":"+element.innerHTML);
});

二、 jq对象.each(callback)

$.each(object, [callback])

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>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</body>
</html>

JS代码：

			var citys = $("#city li");
             $.each(citys,function () {
                 alert($(this).html());

             });

三、 for…of

for(元素对象 of 容器对象)
jquery 3.0 版本之后提供的方式，低级浏览器不适用

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>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</body>
</html>

JS代码：

 var citys = $("#city li");
            for(li of citys){
                alert($(li).html());
            }

一言之意

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS遍历与JQuery遍历

JS遍历语法：for(初始化值;循环结束条件;步长)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>&lt
复制链接

扫一扫