jQuery中如何進(jìn)行遍歷？幾種遍歷方式淺析

jQuery中如何進(jìn)行遍歷？下面本篇文章就來(lái)給大家分享幾種jQuery遍歷對(duì)象的方式，希望對(duì)大家有所幫助！

jQuery遍歷的幾種方式

我們都知道js 的遍歷方式為： for(初始化值;循環(huán)結(jié)束條件;步長(zhǎng)) 例如：

 for (var i = 0; i < 3; i++) {//循環(huán)體}

jQuery遍歷大概有如下幾種用法：

1. jq對(duì)象.each(callback) 或 選擇器.each(callback)【推薦學(xué)習(xí)：jQuery視頻教程】

callback的返回值最后再做說(shuō)明

1.1. 回調(diào)函數(shù)不帶參數(shù) (*注意：這種不帶參數(shù)的回調(diào)只能獲取到集合中的每一個(gè)元素對(duì)象，而不能獲取到相應(yīng)索引值，且只能通過(guò)this來(lái)獲取對(duì)象)

->語(yǔ)法： jquery對(duì)象.each(function(){});

//html <ul id="course">     <li>js</li>     <li>java</li>     <li>C++</li>     <li>jq</li> </ul>

//實(shí)例 $("button").click(function(){   $("#course li").each(function(){     alert($(this).html());//jq獲取方式     alert(this.innerHTML);//js獲取方式   }); });

1.2. 回調(diào)函數(shù)帶參數(shù)(*可以獲取到index索引，且有兩種獲取元素對(duì)象的方式，如下)

->語(yǔ)法：jquery對(duì)象.each(function(index,element){});

• index:就是元素在集合中的索引
• element：就是集合中的每一個(gè)元素對(duì)象
• this：集合中的每一個(gè)元素對(duì)象

//實(shí)例   $("#course li").each(function (index, item) { 			//3.1 獲取 li對(duì)象 第一種方式 this             //alert(this.innerHTML);//js獲取             //alert($(this).html());//jq獲取             /*3.2 獲取 li對(duì)象 第二種方式              在回調(diào)函數(shù)中定義參數(shù) index（索引）item（元素對(duì)象）*/            // alert(index+":"+item.innerHTML);             alert(index+":"+$(item).html()); }

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

callback的返回值最后再做說(shuō)明

2.1. 回調(diào)函數(shù)不帶參數(shù) (*與1.1效果類似，只能通過(guò)this來(lái)獲取對(duì)象)

->語(yǔ)法：$.each(object,function(){});

$.each($("#course li"),function () {               //alert($(this).html());//jq獲取方式    			  alert(this.innerHTML);//js獲取方式          });

2.2. 回調(diào)函數(shù)帶參數(shù)(*可以獲取到index索引，與1.2效果類似，寫(xiě)法不同，如下)

->語(yǔ)法：$.each(object,function(){index,item});

• index:就是元素在集合中的索引
• item：就是集合中的每一個(gè)元素對(duì)象
• this：集合中的每一個(gè)元素對(duì)象

$.each($("#course li"),function (index,item) {              //3.1 獲取 li對(duì)象 第一種方式 this            // alert(this.innerHTML);//js獲取            // alert($(this).html());//jq獲取             /*3.2 獲取 li對(duì)象 第二種方式              在回調(diào)函數(shù)中定義參數(shù) index（索引）item（元素對(duì)象）*/             //alert(index+":"+item.innerHTML);             alert(index+":"+$(item).html());          });

3. for…of: jquery 3.0 版本之后提供的方式(*了解)

->語(yǔ)法：for(元素對(duì)象 of 容器對(duì)象)

   for (li of $("#course li")) {             alert($(li).html());         }

4. 回調(diào)函數(shù)返回值問(wèn)題（涉及第一第二）：(*補(bǔ)充)

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

例如：

  $.each($("#course li"), function (index, item) {             //判斷如果是java，則結(jié)束循環(huán)             if ("java" == $(item).html()) {                 //如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。                 //如果返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)                 return false;	             }             alert($(this).html());//此時(shí)前端頁(yè)面只會(huì)彈出第一個(gè)值js         });            $.each($("#course li"), function (index, item) {             //判斷如果是java，則結(jié)束循環(huán)             if ("java" == $(item).html()) {                 //如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。                 //如果返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)                 return true;	             }             alert($(this).html());//此時(shí)前端頁(yè)面會(huì)依次彈出js,C++jq,不會(huì)彈出java         });

（學(xué)習(xí)視頻分享：web前端）