关于jQuery通过ID获取元素时在IE7与IE其他版本以及其他浏览器的区别

最近做了一个需求,发现一个现象,跟大伙分享一下,如果有说得不对之处请大伙指正,需求大致如下:
界面展示一个Json列表,每一行都要根据Json中的数据做一些样式上面的特殊处理。


起初也没有考虑太多,直接就是在ajax完成的回调函数中添加如下代码:
for(var i=0;i<json.rows.length;i++){
	if(json.rows[i].maxOvdTerms!="0"||json.rows[i].maxOvdDays!="0"){
		jQuery("#drawndnTable tr").eq(i).addClass("fontOrange");
	}
}


但代码上线后发现,IE7下面就永远只有第一条满足条件的数据样式被改变了,IE的其他版本和其他浏览器均正常。
这就郁闷了,有想过会不会是回调函数中的JS代码阻碍了Json数据的渲染,Json数据没有没有全部渲染出来而导致
jQuery无法正确获取到对象,有了这个想法就立马验证了一把,虽然发现IE与chrome和firefox对Json的渲染有所不同,
验证结果为:
IE下面,是待得回调函数走完时才会将Json数据渲染到界面,而chrome和firefox则是先渲染完再执行回调函数。
但这并不是问题所在。
之后无意之中在html源码中看到有多个ID=drawndnTable的元素,而这正是我要找的元素,为什么会产生多个ID一样的
元素在这里不多说了,是UI产生的,而且这个drawndnTable标识是我必须需要的。
之后通过慢慢验证发现,虽然html元素中的ID属性是唯一的;
但jQuery通过ID属性元素时,IE7和IE8、IE9、chrome、firefox有一定的区别
如:
当html界面的多个元素ID都为A时;
在IE7下面通过jQuery("#A")的形式永远只会获取到众多ID相同中第一个html元素;
而在其他版本和浏览器中,会将所有元素ID都等于A的了元素组装成一个Array,就像下面这样:
Html界面中有3个table元素,ID都为B,每个表都有一行row,通过jQuery("#B tr")的形式就能
获得3行,而如果是IE7下面则只能获取到一行。
知道这一点后,我就将ID=drawndnTable改成name=drawndnTable,代码改成如下方式
for(var i=0;i<json.rows.length;i++){
	if(json.rows[i].maxOvdTerms!="0"||json.rows[i].maxOvdDays!="0"){
		jQuery("table[name='drawndnTable']").eq(i).addClass("fontOrange");
	}
}


阅读更多

没有更多推荐了,返回首页