此賬號為華為雲開發者社區官方運營賬號，提供全面深入的雲計算前景分析、豐富的技術乾貨、程序樣例，分享華為雲前沿資訊動態

本文分享自華為雲社區《盤點用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>

點擊關注，第一時間了解華為雲新鮮技術~

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/273175.html