盤(pán)點(diǎn)用jQuery框架實(shí)現(xiàn)“for循環(huán)”的四種方式!
今天來(lái)和大家分享在jQuery高級(jí)開(kāi)發(fā)中對(duì)元素標(biāo)簽體的遍歷常用的幾種方法。
我們以一個(gè)案例的形式進(jìn)行講解,假如我們需要遍歷的是如下ul標(biāo)簽中的li標(biāo)簽:
- <body>
- <ul id="city">
- <li>北京</li>
- <li>上海</li>
- <li>天津</li>
- <li>重慶</li>
- </ul>
- </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)容是“上海”,則不彈出!
- $(function (message) {
- // 獲取到UI下的所有Li標(biāo)簽
- var citys = $("#city li")
- // 利用js中的for循環(huán)進(jìn)行遍歷
- // 將獲取到的li標(biāo)簽數(shù)組進(jìn)行遍歷
- for (var i = 0; i < citys.length; i++) {
- // 循環(huán)內(nèi)容判斷
- if ("上海" == citys[i].innerHTML){
- // break;
- continue;
- }
- // 輸出獲取到的li標(biāo)簽中的內(nèi)容
- alert(i + citys[i].innerHTML);
- }
- });
二、JQuery的遍歷方式
1. jQuery對(duì)象.each(callback)
使用該方法時(shí)需要在each()中實(shí)現(xiàn)function()方法,在function()方法中可以進(jìn)行賦參數(shù),也可以不賦參數(shù),
首先我們來(lái)看不用賦予參數(shù)的一種,這種方法只能用于獲取元素,而不能顯示當(dāng)前是第幾個(gè)元素。如下:
- $(function (message) {
- // 獲取到UI下的所有Li標(biāo)簽
- var citys = $("#city li")
- // 利用jQuery對(duì)象的each進(jìn)行遍歷
- // 利用this進(jìn)行遍歷
- citys.each(function () {
- // alert(this.innerHTML);
- alert($(this).html());
- });
- });
其中的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í)例代碼:
- $(function (message) {
- // 獲取到UI下的所有Li標(biāo)簽
- var citys = $("#city li")
- // 利用jQuery對(duì)象的each進(jìn)行遍歷
- // 利用給function賦值獲取對(duì)象文本
- citys.each(function (index,element) {
- if ("上海" == $(element).html()){
- return true; //結(jié)束本次循環(huán)
- }
- // js方式
- // alert(index + ":" + element.innerHTML);
- // jQuery方式s
- alert(index + ":" + $(element).text());
- });
- });
2. $.each(object, [callback])
使用這種方法和上面那種方法相似,只不過(guò)最前面不是jQuery對(duì)象了,而是一個(gè)$符號(hào),jQuery對(duì)象被放到了each()里面,但實(shí)現(xiàn)還是和上面一樣的。如下:
- $(function (message) {
- // 獲取到UI下的所有Li標(biāo)簽
- var citys = $("#city li")
- // 利用$.each()方法
- $.each(citys, function () {
- alert($(this).html());
- });
- });
3. for..of方法
這種方法是jquery 3.0 版本之后提供的方式
語(yǔ)法格式是:for(元素對(duì)象 of 容器對(duì)象)
同樣是容ul標(biāo)簽中取出li標(biāo)簽元素,代碼如下:
- $(function (message) {
- // 獲取到UI下的所有Li標(biāo)簽
- var citys = $("#city li")
- // 利用for---of的方式
- for (li of citys){
- alert($(li).html())
- }
- });
最后附上面四種實(shí)現(xiàn)的完整源碼。
- <!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標(biāo)簽
- var citys = $("#city li")
- // 利用js中的for循環(huán)進(jìn)行遍歷
- // 將獲取到的li標(biāo)簽數(shù)組進(jìn)行遍歷
- for (var i = 0; i < citys.length; i++) {
- // 循環(huán)內(nèi)容判斷
- if ("上海" == citys[i].innerHTML){
- // break;
- continue;
- }
- // 輸出獲取到的li標(biāo)簽中的內(nèi)容
- alert(i + citys[i].innerHTML);
- }
- // 利用jQuery對(duì)象的each進(jìn)行遍歷
- // 利用this進(jìn)行遍歷
- /* citys.each(function () {
- // alert(this.innerHTML);
- alert($(this).html());
- });
- */
- // 利用給function賦值獲取對(duì)象文本
- /*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>