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

最新推荐文章于 2024-04-11 17:18:01 发布

_七七

最新推荐文章于 2024-04-11 17:18:01 发布

阅读量259

点赞数

分类专栏： 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())
            }
        })