Jquery框架 for迴圈的四種方法
阿新 • • 發佈：2022-05-19
如下ul標籤中的li標籤為例
<body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重慶</li> </ul> </body>
一.JS的遍歷方式
$(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)
$(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])
$(function (message) { // 獲取到UI下的所有Li標籤 var citys = $("#city li")
// 利用$.each()方法 $.each(citys, function () { alert($(this).html()); }); });
3. for..of方法
語法格式是：for(元素物件 of 容器物件)
$(function (message) { // 獲取到UI下的所有Li標籤 var citys = $("#city li") // 利用for---of的方式 for (li of citys){ alert($(li).html()) } });