javascript循环仅适用于所有其他元素

Question

完成ajax查询后，我在下面有以下javascript

我所有的图像都有名称=“ pic”

<script type="text/javascript">
 function done() {
     var e = document.getElementsByName("pic");
     alert(e.length);
     for (var i = 0; i < e.length; i++) {
         cvi_instant.add(e[i], { shadow: 75, shade: 10 });
     }
 }

我的目标是在使用此库的周围应用图像边框：

http://www.netzgesta.de/instant/

问题在于，由于某种原因，这可行，但似乎仅适用于其他所有图片，而不是其他所有图片。任何线索为什么上面的代码会跳过其他所有元素？

编辑：我在循环中添加了一个警报，它确实正确地转到0，1,2,3,4,5,6。 。

     for (var i = 0; i < e.length; i++)
     {
         alert(i);
         cvi_instant.add(e[i], { shadow: 75, shade: 10 });
     }

Answer 1

它似乎只适用于其他所有图片，而不是所有其他图片

这是破坏性迭代的经典标志。

考虑一下，如果我猜该函数cvi_instant.add用pic其他一个或多个其他元素替换命名的元素，会发生什么情况。

getElementsByName返回一个“活动的”
NodeList：每次您对DOM进行更改时，它都会保持最新状态。因此，如果它之前有五个元素，则在调用cvi_instant.add它之后现在仅包含四个元素：第一个节点消失了，而节点1-4已向下移动到位置0-3。

现在，您再次循环。i++，所以我们看的是元素1。但是元素1现在原来是元素2！我们跳过了原始元素1，然后将继续跳过所有其他元素，直到到达列表的末尾（现在是长度的一半）。

在迭代列表的同时更改列表会导致这种问题。如果迭代中的过程实际上 将 元素 添加 到列表中，您甚至可以得到无限循环！

快速解决方案是向后迭代循环。现在，您首先执行最后一个元素，将所有其他元素保留在其原始位置，并且不会跳过：

 var e= document.getElementsByName("pic");
 for (var i= e.length; i-->0;) {
     cvi_instant.add(e[i], { shadow: 75, shade: 10 });
 }

如果您 知道 总是要在每次调用的列表中删除元素，则另一个简单的解决方案是：

 var e= document.getElementsByName("pic");
 while (e.length>0) {
     cvi_instant.add(e[0], { shadow: 75, shade: 10 });
 }

当循环主体可以对列表执行 任何操作时
，例如插入pic在文档开头命名的新元素或从中间删除其他元素，则需要最通用的解决方案。稍稍慢一些，但可以安全地创建列表的静态副本以进行操作：

 function Array_fromList(l) {
     var a= [];
     for (var i= 0; i<l.length; i++)
         a.push(l[i]);
     return a;
 }

 var e= Array_fromList(document.getElementsByName("pic"));
 for (var i= 0; i<e.length; i++) {
     cvi_instant.add(e[i], { shadow: 75, shade: 10 });
 }