jquery里面的循環(huán)的用法
下面提一下jQuery的each方法的幾種常用的用法
Js代碼
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面這個(gè)each輸出的結(jié)果分別為:one,two,three,four var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其實(shí)arr1為一個(gè)二維數(shù)組,item相當(dāng)于取每一個(gè)一維數(shù)組,
//item[0]相對(duì)于取每一個(gè)一維數(shù)組里的弟一個(gè)值
//所以上面這個(gè)each輸出分別為:1 4 7 var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//這個(gè)each就有更厲害了,能循環(huán)每一個(gè)屬性
//輸出結(jié)果為:1 2 3 4 <script type="text/javascript">
$(function(){
var con=[
{
"image1":"img/1524880084962.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
},
{
"image1":"img/1524879960117.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
},
{
"image1":"img/1524879605807.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
},
{
"image1":"img/1524879181488.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
}
]
var html="";
$.each(con, function(k,v) {//這里的函數(shù)參數(shù)是鍵值對(duì)的形式,k代表鍵名,v代表值
html+='<li class="shopBox">'+
'<div class="shopImg"><img src='+con[k].image1+'/></div>'+
'<div class="shopListName">'+con[k].shopName+'</div>'+
'<div class="shopPrice">'+
'<span class="price">¥'+con[k].price+'</span>'+
'<span class="marketPrice">¥'+con[k].markPrice+'</span>'+
'</div>'+
'</li>'
});
$(".shop_box").append(html);
})
</script>
<script>
var a = {
"sys_bb": [
{
"menu_name": "教務(wù)處",
"menus": [
{
"menu_name": "張明"
},
{
"menu_name": "王明"
}
]
},
{
"menu_name": "辦公室",
"menus": [
{
"menu_name": "劉處"
},
{
"menu_name": "小王"
},
{
"menu_name": "張三"
}
]
}
],
"sys_cw": [
{
"menu_name": "財(cái)務(wù)處",
"menus": [
{
"menu_name": "王虎"
}
]
}
]
};
$(function () {
$.each(a.sys_bb, function (i, n) {
$("#Div").append(a.sys_bb[i].menu_name + "<br>");
$.each(a.sys_bb[i].menus, function (i, n) {
$("#Div").append(" " + n.menu_name + "<br>");
});
});
$.each(a.sys_cw, function (i, n) {
$("#Div").append(a.sys_cw[i].menu_name + "<br>");
$.each(a.sys_cw[i].menus, function (i, n) {
$("#Div").append(" " + n.menu_name + "<br>")
});
});
});
</script>有關(guān)我們服務(wù)的更多信息,請(qǐng)聯(lián)系項(xiàng)目經(jīng)理
15899750475 楊先生