盤點用jQuery框架實現“for迴圈”的四種方式!

華為雲開發者社群 發表於 2021-06-17
jQuery 框架

摘要:分享在jQuery高階開發中對元素標籤體的遍歷常用的幾種方法。

本文分享自華為雲社群《盤點用jQuery框架實現“for迴圈”的四種方式!》,原文作者:灰小猿 。

今天繼續來和大家分享在jQuery高階開發中對元素標籤體的遍歷常用的幾種方法。

我們以一個案例的形式進行講解,假如我們需要遍歷的是如下ul標籤中的li標籤:

<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重慶</li>
</ul>
</body>

一、JS的遍歷方式

首先第一種:利用js物件進行遍歷。

利用js物件的方法進行遍歷和我們平常的for迴圈遍歷是一樣的思路和解法,首先我們應該獲取到需要遍歷的元素標籤,然後使用for迴圈方法對其中存在的標籤進行遍歷:下面以一個例項來進行講解。

遍歷四個li標籤,並且彈出其中的內容,如果標籤體內容是“上海”,則不彈出!

 $(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")
            // 利用js中的for迴圈進行遍歷
            // 將獲取到的li標籤陣列進行遍歷
            for (var i = 0; i < citys.length; i++) {
                 // 迴圈內容判斷
                if ("上海" == citys[i].innerHTML){
                  // break;
                    continue;
                }
                // 輸出獲取到的li標籤中的內容
                alert(i + citys[i].innerHTML);
            }

        });

二、JQuery的遍歷方式

1. jQuery物件.each(callback)

使用該方法時需要在each()中實現function()方法,在function()方法中可以進行賦引數,也可以不賦引數,

首先我們來看不用賦予引數的一種,這種方法只能用於獲取元素,而不能顯示當前是第幾個元素。如下:

$(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")

            // 利用jQuery物件的each進行遍歷
            // 利用this進行遍歷
            citys.each(function () {
                // alert(this.innerHTML);
                alert($(this).html());
            });

        });

其中的this表示:集合中的每一個元素物件

第二種是在function()中賦予引數:

jquery物件.each(function(index,element){});

* index:就是元素在集合中的索引

* element:就是集合中的每一個元素物件

利用這種方式可以回撥函式返回值:如結束本次迴圈或結束整個迴圈嗎,但是並不是使用break,

在這裡使用的是return true/false

* false:如果當前function返回為false,則結束迴圈(break)。

* true:如果當前function返回為true,則結束本次迴圈,繼續下次迴圈(continue)

例項程式碼:

$(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")

            // 利用jQuery物件的each進行遍歷
            // 利用給function賦值獲取物件文字
            citys.each(function (index,element) {

                if ("上海" == $(element).html()){
                    return true;    //結束本次迴圈
                }
                // js方式
                // alert(index + ":" + element.innerHTML);
                // jQuery方式s
                alert(index + ":" + $(element).text());

            });
        });

2. $.each(object, [callback])

使用這種方法和上面那種方法相似,只不過最前面不是jQuery物件了,而是一個$符號,jQuery物件被放到了each()裡面,但實現還是和上面一樣的。如下:

$(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")

            // 利用$.each()方法
           $.each(citys, function () {
                alert($(this).html());
            });

        });

3. for..of方法

這種方法是jquery 3.0 版本之後提供的方式

語法格式是:for(元素物件 of 容器物件)

同樣是容ul標籤中取出li標籤元素,程式碼如下:

$(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")

            // 利用for---of的方式
            for (li of citys){
                alert($(li).html())
            }

        });

最後附上面四種實現的完整原始碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function (message) {
            // 獲取到UI下的所有Li標籤
            var citys = $("#city li")
            // 利用js中的for迴圈進行遍歷
            // 將獲取到的li標籤陣列進行遍歷
            for (var i = 0; i < citys.length; i++) {
                 // 迴圈內容判斷
                if ("上海" == citys[i].innerHTML){
                  // break;
                    continue;
                }
                // 輸出獲取到的li標籤中的內容
                alert(i + citys[i].innerHTML);
            }

            // 利用jQuery物件的each進行遍歷
            // 利用this進行遍歷
/*            citys.each(function () {
                // alert(this.innerHTML);
                alert($(this).html());
            });
            */
            // 利用給function賦值獲取物件文字
            /*citys.each(function (index,element) {

                if ("上海" == $(element).html()){
                    return true;
                }
                // js方式
                // alert(index + ":" + element.innerHTML);
                // jQuery方式s
                alert(index + ":" + $(element).text());

            });*/

            // 利用$.each()方法
           /* $.each(citys, function () {
                alert($(this).html());
            });*/

            // 利用for---of的方式
/*            for (li of citys){
                alert($(li).html())
            }*/
            
        });
        
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重慶</li>
</ul>
</body>
</html>


點選關注,第一時間瞭解華為雲新鮮技術~