asp.net - javascript循环仅适用于所有其他元素

Question

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

我所有的图片都有name="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

it only seem to apply to every other picture instead of every one

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

如果正如我猜测的那样，函数 cvi_instant.add 将名为 pic 的元素替换为一些其他元素，请考虑一下会发生什么。

getElementsByName 返回一个“实时”节点列表:每次您对 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 });
 }