Jquery的隐式迭代是非常便利的特性,循环体可以压缩到一句话。
但在练习的时候遇到一个坑,引用类型对象按常识来说都是引用传递的,但是从测试2可以看出,此时按照值类型进行复制传递了,而且可以猜想,隐式迭代除了在内部帮我们进行了参数的复制,还有个初始化的过程,每次都会对传入的变量p先做一次remove操作,导致第三个div里永远只有一个p节点。
测试1是显示迭代,测试3没有使用变量。
这样就可以更好地理解Jquery参考手册对于append()的描述:“向匹配元素集合中的每个元素结尾插入由参数指定的内容。”。
<div id="div3">
<div>1</div><div>2</div><div>3</div>
</div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$p = $("<p>ppp</p>");
//测试1:显式迭代:只有最后一个div得到$p,符合预期。连续运行多次也正常。
$("#div3 div").each(function (index, e) {
$(e).append($p);
});
//测试2:隐式迭代:给每个div都添加了p标签?连续用两次后?
$("#div3 div").append($p);
$("#div3 div").append($p);
//测试3:不使用变量的隐式迭代。
$("#div3 div").append($("<p>ppp</p>"));
$("#div3 div").append($("<p>ppp</p>"));
//测试1得到结果"123ppp"
//测试2得到结果"1pppppp2pppppp3ppp"
//测试3得到结果"1pppppp2pppppp3pppppp"
});
</script>