遍历html页面中所需要的元素是一个很常见的操作;
$(a).each(function(){b})
//就是这种形式来遍历元素的,a=需要遍历的元素对象,div,button等等;b是你遍历时想做的操作
如果只想遍历某个div里的指定元素可以使用.find()
$('#div1').find(a).each(function(){b})
下面有几个例子可以看一下
遍历下拉框,给条件符合的下拉框绑定点击事件,相当于监视下拉框选项变化了
$('select').each(function() {
var aId = $(this).attr('id');//获取自身id
var parid=$(this).parents().attr('id')//获取父元素id,这个操作在多页面可能重复id的时候很有必要
var sel = ''//接收达到条件的元素id
var selda = ''//接收内容
var ada = this.value//当前下拉框的内容
$(this).find('option').each(function(){//这里遍历它下面的东西
var seldata=this.innerHTML
var ad=seldata.substr(-3)//保留后三位
if(ad=='条/页'){//判断条件
sel=aId
selda=ada
}
})
if(sel!=''){//先判断有没有符合要求的
$('#'+parid).find('#'+sel).click(function(){//使用父元素向下寻找它比较保险
console.log(sel)
console.log(this.value)
if(selda!=this.value){//点击时判断内容是否变化,如果有变化再进行下一步操作
console.log("不对,我要请求新数据"+parid.slice(3))
selda=this.value
}
})
}
});
遍历页面中的按钮
$('button').each(function() {
var aId = $(this).attr('id');
bangding($(this),aId)//这里是传入了别的函数进行下一步操作
});
遍历div,用于生成图表
$('div').each(function() {
var aId = $(this).attr('id');
var aDa = $(this).attr('data');
if (typeof(aDa) == 'string') {
if (aDa.length > 20) {
if (aDa[aDa.length - 1] != "}") {
aDa += "}"
var chart = JSON.parse(aDa)
create_charts(chart, aId)//create_charts为生成图表的函数
} else if (aDa[aDa.length - 1] == "}") {
var chart = JSON.parse(aDa)
create_charts(chart, aId)
}
} else {}
} else {}
});
遍历ul,生成树状控件
$('ul').each(function() {
var aId = $(this).attr('id');
var aDa = $(this).attr('data');
if (typeof(aDa) == 'string') {
if (aDa.length > 20) {
// $(this).html(aId+" => chart");
// console.log(aId)
// console.log(aDa)
if (aDa[aDa.length - 1] != "}") {
aDa += "}"
var chart = JSON.parse(aDa)
create_charts(chart, aId)//create_charts函数里包含了生成树状控件
// console.log(chart)
} else if (aDa[aDa.length - 1] == "}") {
var chart = JSON.parse(aDa)
create_charts(chart, aId)
// console.log(chart)
}
} else {}
} else {}
});