偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

盤(pán)點(diǎn)用jQuery框架實(shí)現(xiàn)“for循環(huán)”的四種方式！

作者：灰小猿
開(kāi)發(fā) 前端
今天來(lái)和大家分享在jQuery高級(jí)開(kāi)發(fā)中對(duì)元素標(biāo)簽體的遍歷常用的幾種方法。

[[406186]]

今天來(lái)和大家分享在jQuery高級(jí)開(kāi)發(fā)中對(duì)元素標(biāo)簽體的遍歷常用的幾種方法。

我們以一個(gè)案例的形式進(jìn)行講解，假如我們需要遍歷的是如下ul標(biāo)簽中的li標(biāo)簽：

  1. <body> 
  2. <ul id="city"> 
  3.     <li>北京</li> 
  4.     <li>上海</li> 
  5.     <li>天津</li> 
  6.     <li>重慶</li> 
  7. </ul> 
  8. </body> 

一、JS的遍歷方式

首先第一種：利用js對(duì)象進(jìn)行遍歷。

利用js對(duì)象的方法進(jìn)行遍歷和我們平常的for循環(huán)遍歷是一樣的思路和解法，首先我們應(yīng)該獲取到需要遍歷的元素標(biāo)簽，然后使用for循環(huán)方法對(duì)其中存在的標(biāo)簽進(jìn)行遍歷：下面以一個(gè)實(shí)例來(lái)進(jìn)行講解。

遍歷四個(gè)li標(biāo)簽，并且彈出其中的內(nèi)容，如果標(biāo)簽體內(nèi)容是“上海”,則不彈出！

  1. $(function (message) { 
  2.            // 獲取到UI下的所有Li標(biāo)簽 
  3.            var citys = $("#city li") 
  4.            // 利用js中的for循環(huán)進(jìn)行遍歷 
  5.            // 將獲取到的li標(biāo)簽數(shù)組進(jìn)行遍歷 
  6.            for (var i = 0; i < citys.length; i++) { 
  7.                 // 循環(huán)內(nèi)容判斷 
  8.                if ("上海" == citys[i].innerHTML){ 
  9.                  // break; 
  10.                    continue; 
  11.                } 
  12.                // 輸出獲取到的li標(biāo)簽中的內(nèi)容 
  13.                alert(i + citys[i].innerHTML); 
  14.            } 
  15.  
  16.        }); 

二、JQuery的遍歷方式

1. jQuery對(duì)象.each(callback)

使用該方法時(shí)需要在each()中實(shí)現(xiàn)function()方法，在function()方法中可以進(jìn)行賦參數(shù)，也可以不賦參數(shù)，

首先我們來(lái)看不用賦予參數(shù)的一種，這種方法只能用于獲取元素，而不能顯示當(dāng)前是第幾個(gè)元素。如下：

  1. $(function (message) { 
  2.             // 獲取到UI下的所有Li標(biāo)簽 
  3.             var citys = $("#city li") 
  4.  
  5.             // 利用jQuery對(duì)象的each進(jìn)行遍歷 
  6.             // 利用this進(jìn)行遍歷 
  7.             citys.each(function () { 
  8.                 // alert(this.innerHTML); 
  9.                 alert($(this).html()); 
  10.             }); 
  11.  
  12.         }); 

其中的this表示：集合中的每一個(gè)元素對(duì)象

第二種是在function()中賦予參數(shù)：

jquery對(duì)象.each(function(index,element){});

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

* element：就是集合中的每一個(gè)元素對(duì)象

利用這種方式可以回調(diào)函數(shù)返回值：如結(jié)束本次循環(huán)或結(jié)束整個(gè)循環(huán)嗎，但是并不是使用break，

在這里使用的是return true/false

* false:如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。

* true:如果當(dāng)前function返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)

實(shí)例代碼：

  1. $(function (message) { 
  2.             // 獲取到UI下的所有Li標(biāo)簽 
  3.             var citys = $("#city li") 
  4.  
  5.             // 利用jQuery對(duì)象的each進(jìn)行遍歷 
  6.             // 利用給function賦值獲取對(duì)象文本 
  7.             citys.each(function (index,element) { 
  8.  
  9.                 if ("上海" == $(element).html()){ 
  10.                     return true;    //結(jié)束本次循環(huán) 
  11.                 } 
  12.                 // js方式 
  13.                 // alert(index + ":" + element.innerHTML); 
  14.                 // jQuery方式s 
  15.                 alert(index + ":" + $(element).text()); 
  16.  
  17.             }); 
  18.         }); 

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

使用這種方法和上面那種方法相似，只不過(guò)最前面不是jQuery對(duì)象了，而是一個(gè)$符號(hào),jQuery對(duì)象被放到了each()里面，但實(shí)現(xiàn)還是和上面一樣的。如下：

  1. $(function (message) { 
  2.             // 獲取到UI下的所有Li標(biāo)簽 
  3.             var citys = $("#city li") 
  4.  
  5.             // 利用$.each()方法 
  6.            $.each(citys, function () { 
  7.                 alert($(this).html()); 
  8.             }); 
  9.  
  10.         }); 

3. for..of方法

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

語(yǔ)法格式是：for(元素對(duì)象 of 容器對(duì)象)

同樣是容ul標(biāo)簽中取出li標(biāo)簽元素，代碼如下：

  1. $(function (message) { 
  2.             // 獲取到UI下的所有Li標(biāo)簽 
  3.             var citys = $("#city li") 
  4.  
  5.             // 利用for---of的方式 
  6.             for (li of citys){ 
  7.                 alert($(li).html()) 
  8.             } 
  9.  
  10.         }); 

最后附上面四種實(shí)現(xiàn)的完整源碼。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title></title> 
  6.     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> 
  7.     <script type="text/javascript"> 
  8.         $(function (message) { 
  9.             // 獲取到UI下的所有Li標(biāo)簽 
  10.             var citys = $("#city li") 
  11.             // 利用js中的for循環(huán)進(jìn)行遍歷 
  12.             // 將獲取到的li標(biāo)簽數(shù)組進(jìn)行遍歷 
  13.             for (var i = 0; i < citys.length; i++) { 
  14.                  // 循環(huán)內(nèi)容判斷 
  15.                 if ("上海" == citys[i].innerHTML){ 
  16.                   // break; 
  17.                     continue; 
  18.                 } 
  19.                 // 輸出獲取到的li標(biāo)簽中的內(nèi)容 
  20.                 alert(i + citys[i].innerHTML); 
  21.             } 
  22.  
  23.             // 利用jQuery對(duì)象的each進(jìn)行遍歷 
  24.             // 利用this進(jìn)行遍歷 
  25. /*            citys.each(function () { 
  26.                 // alert(this.innerHTML); 
  27.                 alert($(this).html()); 
  28.             }); 
  29.             */ 
  30.             // 利用給function賦值獲取對(duì)象文本 
  31.             /*citys.each(function (index,element) { 
  32.  
  33.                 if ("上海" == $(element).html()){ 
  34.                     return true; 
  35.                 } 
  36.                 // js方式 
  37.                 // alert(index + ":" + element.innerHTML); 
  38.                 // jQuery方式s 
  39.                 alert(index + ":" + $(element).text()); 
  40.  
  41.             });*/ 
  42.  
  43.             // 利用$.each()方法 
  44.            /* $.each(citys, function () { 
  45.                 alert($(this).html()); 
  46.             });*/ 
  47.  
  48.             // 利用for---of的方式 
  49. /*            for (li of citys){ 
  50.                 alert($(li).html()) 
  51.             }*/ 
  52.              
  53.         }); 
  54.          
  55.     </script> 
  56. </head> 
  57. <body> 
  58. <ul id="city"> 
  59.     <li>北京</li> 
  60.     <li>上海</li> 
  61.     <li>天津</li> 
  62.     <li>重慶</li> 
  63. </ul> 
  64. </body> 
  65. </html> 

 

責(zé)任編輯：張燕妮 來(lái)源： 華為云社區(qū)
框架jQuery開(kāi)發(fā)
相關(guān)推薦

2021-12-22 09:34:01

Golagn配置方式

2015-04-02 16:54:52

災(zāi)難恢復(fù)VDI災(zāi)難恢復(fù)

2015-04-13 11:39:26

VDI災(zāi)難恢復(fù)

2010-08-05 09:33:08

Flex頁(yè)面跳轉(zhuǎn)

2021-08-11 20:17:22

推薦算法系統(tǒng)

2022-01-12 11:02:01

云計(jì)算安全技術(shù)

2023-05-22 08:03:28

JavaScrip枚舉定義

2022-03-25 14:47:24

Javascript數(shù)據(jù)類(lèi)型開(kāi)發(fā)

2010-07-28 13:54:42

Flex數(shù)據(jù)綁定

2017-04-17 19:31:03

Android多線程

2020-06-12 08:28:29

JavaScript開(kāi)發(fā)技術(shù)

2013-06-14 15:24:57

Android開(kāi)發(fā)移動(dòng)開(kāi)發(fā)數(shù)據(jù)存儲(chǔ)方式

2014-12-25 09:41:15

Android加載方式

2013-10-17 09:25:52

2011-03-16 09:05:53

NATiptables

2025-01-21 09:10:00

2021-07-14 10:31:15

JavaScript開(kāi)發(fā) 技巧

2021-12-01 15:40:40

節(jié)日開(kāi)源剪貼畫(huà)

2025-05-09 09:39:45

2024-01-17 13:56:00

Redis節(jié)點(diǎn)映射關(guān)系
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)