jQuery遍歷的幾種方式
- 1. jq物件.each(callback) 或 選擇器.each(callback)
- 1.1. 回呼函式不帶引數 (*注意：這種不帶引數的回呼只能獲取到集合中的每一個元素物件，而不能獲取到相應索引值，且只能通過this來獲取物件)
- 1.2. 回呼函式帶引數(*可以獲取到index索引，且有兩種獲取元素物件的方式，如下)
- 2. jQuery.each(object, [callback])
- 2.1. 回呼函式不帶引數 (*與1.1效果類似，只能通過this來獲取物件)
- 2.2. 回呼函式帶引數(*可以獲取到index索引，與1.2效果類似，寫法不同，如下)
- 3. for..of: jquery 3.0 版本之后提供的方式(*了解)
- 4. 回呼函式回傳值問題（涉及第一第二）：(*補充)
我們都知道js 的遍歷方式為： for(初始化值;回圈結束條件;步長) 例如：
for (var i = 0; i < 3; i++) {//回圈體}
jQuery遍歷大概有如下幾種用法：
1. jq物件.each(callback) 或 選擇器.each(callback)
callback的回傳值最后再做說明
1.1. 回呼函式不帶引數 (*注意：這種不帶引數的回呼只能獲取到集合中的每一個元素物件，而不能獲取到相應索引值，且只能通過this來獲取物件)
->語法： jquery物件.each(function(){});
//html
<ul id="course">
<li>js</li>
<li>java</li>
<li>C++</li>
<li>jq</li>
</ul>
//實體
$("button").click(function(){
$("#course li").each(function(){
alert($(this).html());//jq獲取方式
alert(this.innerHTML);//js獲取方式
});
});
1.2. 回呼函式帶引數(*可以獲取到index索引，且有兩種獲取元素物件的方式，如下)
->語法：jquery物件.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一個元素物件
- this：集合中的每一個元素物件
//實體
$("#course li").each(function (index, item) {
//3.1 獲取li物件 第一種方式 this
//alert(this.innerHTML);//js獲取
//alert($(this).html());//jq獲取
/*3.2 獲取li物件 第二種方式
在回呼函式中定義引數 index（索引）item（元素物件）*/
// alert(index+":"+item.innerHTML);
alert(index+":"+$(item).html());
}
2. jQuery.each(object, [callback])
callback的回傳值最后再做說明
2.1. 回呼函式不帶引數 (*與1.1效果類似，只能通過this來獲取物件)
->語法：$.each(object,function(){});
$.each($("#course li"),function () {
//alert($(this).html());//jq獲取方式
alert(this.innerHTML);//js獲取方式
});
2.2. 回呼函式帶引數(*可以獲取到index索引，與1.2效果類似，寫法不同，如下)
->語法：$.each(object,function(){index,item});
- index:就是元素在集合中的索引
- item：就是集合中的每一個元素物件
- this：集合中的每一個元素物件
$.each($("#course li"),function (index,item) {
//3.1 獲取li物件 第一種方式 this
// alert(this.innerHTML);//js獲取
// alert($(this).html());//jq獲取
/*3.2 獲取li物件 第二種方式
在回呼函式中定義引數 index（索引）item（元素物件）*/
//alert(index+":"+item.innerHTML);
alert(index+":"+$(item).html());
});
3. for…of: jquery 3.0 版本之后提供的方式(*了解)
->語法：for(元素物件 of 容器物件)
for (li of $("#course li")) {
alert($(li).html());
}
4. 回呼函式回傳值問題（涉及第一第二）：(*補充)
- true:如果當前function回傳為false，則結束回圈(break)，
- false:如果當前function回傳為true，則結束本次回圈，繼續下次回圈(continue)
例如：
$.each($("#course li"), function (index, item) {
//判斷如果是java，則結束回圈
if ("java" == $(item).html()) {
//如果當前function回傳為false，則結束回圈(break)，
//如果回傳為true，則結束本次回圈，繼續下次回圈(continue)
return false;
}
alert($(this).html());//此時前端頁面只會彈出第一個值js
});
$.each($("#course li"), function (index, item) {
//判斷如果是java，則結束回圈
if ("java" == $(item).html()) {
//如果當前function回傳為false，則結束回圈(break)，
//如果回傳為true，則結束本次回圈，繼續下次回圈(continue)
return true;
}
alert($(this).html());//此時前端頁面會依次彈出js,C++jq,不會彈出java
});
創作不易，如果這篇文章能夠幫助到你，希望能關注或收藏一下博主，如果文章內容有問題也可留言討論，我們一起學習，一起進步！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264169.html
標籤：其他
上一篇：選單欄 是頂級ul 里面的根級li ，根級li里面又包含不確定個數的ul，各個ul又包含不確定個數的li,依此遞回，li又包含ul，ul包含li等等