- jQuery 遍历 - each() 方法
- 语法:
$(selector).each(function(index,element))
- 参数:
function(index,element)
- 描述:必需。为每个匹配元素规定运行的函数。
- index - 回调函数第一个参数一定是索引号,可以自己指定索引号名称
- element - 回调函数第二个参数与一定是DOM对象(也可使用 “this” 选择器)
1.问题产生
学习jQuery.each()
方法,发现在回调函数里面,先打印DOM对象,再修改DOM对象的某个属性值,打印出的对象已经具有该属性值了。照理说,脚本语言,不应该是逐行解释运行吗?
2. 问题相关代码
var colors = ['yellow', 'green', 'blue'];
$('[class^="box"]').each(function (i, dom) {
//模块1 DOm对象继承颜色属性为黑
console.log(i); //0
console.log(dom); //color: yellow;
console.log($(dom).css('color')); //rgb(0, 0, 0) 继承为黑色
console.log(dom.style.color); //无结果
//模块2 设置为蓝色
$(dom).css('color', 'blue')
console.log(dom); //color: yellow;
console.log($(dom).css('color')); //rgb(0, 0, 255)
console.log(dom.style.color); //blue
//模块3 设置为黄色
$(dom).css('color', colors[i])
console.log(dom); //color: yellow;
console.log($(dom).css('color')); //rgb(0, 0, 255)
console.log(dom.style.color); //yellow
})
3. 运行结果及报错内容
所有的 console.log(dom); 执行结果都一样,为下面这行输出:
<div class="box1" style="background-color: red; color: yellow;"></div>
回调函数执行一次的运行结果见备注,可以发现:
- 问题一:
明明是在到模块3里才更改了对象颜色属性为yellow,
但是所有直接输出DOM对象的打印结果中,颜色属性为yellow?明明打印的时候还没有赋值 - 问题二:
模块1console.log(dom.style.color);
该行输出结果dom元素打印颜色值为空?
应该是因为我没有显式的赋予颜色值,而是继承的,继承的属性值是没有包含在DOM对象的属性里面吗
4. 我的解答思路和尝试过的方法
不管在callback 的任何地方,打印DOM对象,其颜色属性都是以最后一次修改为准
但是单独打印DOM颜色属性,不管是用jQuery对象还是DOM对象获取颜色属性,都是以上一次修改为准
更奇怪的事情发生了:
<div class="box1" style="background-color: red; color: yellow;"></div>
运行控制台输出结果
<div class="box1" style="background-color: red;"></div>
调试控制台输出结果
5. 我想要达到的结果
解决 DOM对象为什么还没赋予属性值,但打印对象已经添加了?
解决 DOM对象整个输出,对象内部的颜色属性 和 DOM对象.样式.颜色 不一致的问题
6. 解决方法
-
大佬的回复
- chrome可能做了优化,打印dom只显示最后设置的颜色
题主将dom.style用JSON.stringify打印出来看color是blue的,这个肯定是没问题的,只是chrome显示不一样而已
- 就和打印引用对象一样,在打印对象后,再修改对象的数据,当从控制台展开后,实际是最后修改的值,并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。
- chrome可能做了优化,打印dom只显示最后设置的颜色
-
自己的单步调试
对应的单步调试结果:
-
只使用DOM
var boxs = document.querySelectorAll('[class^="box"]') for (var i = 0; i < boxs.length; i++) { console.log(i); //0 console.log(boxs[i]); console.log(boxs[i].style.color); //无结果 boxs[i].style.color = 'blue' console.log(boxs[i]); console.log(boxs[i].style.color); //blue boxs[i].style.color = 'yellow' console.log(boxs[i]); console.log(boxs[i].style.color); //yellow }
对应的结果·
7. 结论
可以发现如大佬所言,实时情况(比如调试或JSON.stringify)下,DOM对象确实颜色属性为正确赋值,而不是以最后一次为准。通过解决方法3可以发现:这个问题的产生和JQuery一点关系都没有。回归问题本身 就是对象引用的问题。
打印引用对象:即使在打印对象后,再修改对象的数据;但当从控制台展开后,实际是最后修改的值,并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。
突然发现我好傻…对象其实存的是地址,那么打印对象的时候,地址里面的值已经被更改了