基于元素不存在的中断循环答案

【问题标题】：Break loop based on element not existing基于元素不存在的中断循环
【发布时间】：2012-03-07 12:54:26
【问题描述】：

我已经构建了一个 cms，它允许用户将最多 10 个图像添加到幻灯片中，所有这些图像都在前端以 div 的形式输出，id 为 ShowcaseSlide，末尾附加一个 0-9 的数字，例如ShowcaseSlide0，showcaseSlide1 等。对于控制幻灯片的 javascript，我需要将所有 div id 输出到一个数组中，但是在幻灯片完成时结束数组，例如，如果 div id 来自 showcaseSlide0-showcaseSlide3，我需要数组从幻灯片 [0] 到幻灯片 [3]。

这是我之前尝试过的当前代码和一些注释掉的代码：

var slides = new Array();
var count = 0;
for(i=0; i<=10; i++){
slides[i] = "showcaseSlide"+i;
document.write(slides[i]); //so that I can see which id's are in the array
var div = document.getElementById(slides[i]);
//if(div) { break; } <- doesn't break
//if(document.getElementById(slides[i]) == null) break; <-breaks after 1st
//if(document.getElementById(slides[i]) == undefined) break; <- breaks after 1st
};

编辑：

我发现（感谢下面评论的 Teemu）它不起作用，因为它是在页面加载之前调用的，因此是在渲染对象之前调用的。我还要感谢 Peter Kelly（他也在下面发表评论），他指出我需要使用 !在我打破 if 语句和指出我的循环 1 太大的弗雷泽中。

这是新代码（包括初始化函数的其他元素）：

var count = 0;
var wait = 4000;
var slides = [];

function startShowcase() {

    for(var i=0; i<10; i++){
        slides[i] = "showcaseSlide"+i;;
       if(!document.getElementById(slides[i])) { break; }
    };
    setInterval(showcase, wait);

};

【问题讨论】：

你试过 if (!div)
"breaks after 1st"：那么ID为showcaseSlide0的元素不存在。测试本身是正确的（虽然过于冗长）。
我已经尝试过 if (!div) （在第一次之后中断）和 document.getElementById(slides[count]) 在下面控制幻灯片的函数中工作（计数是一个计数器，当我们到达数组的末尾）。
如果此代码在页面完成后作为函数调用执行，请删除document.write，它会清除文档，包括您的脚本。请改用alert()。如果在解析页面时执行代码，则showcaseSlide-elements 可能还不存在。
@Teemu 这正是问题所在。 document.write 正在工作，因为代码在页面正文之前执行，因此无法获取尚未呈现的 div。我已将它添加到初始化幻灯片的函数中（称为 onload），它现在可以工作了:)

标签： javascript arrays html for-loop getelementbyid

【解决方案1】：

我不会这么复杂。我猜你有一个应用于所有幻灯片 div 的类？如果这样做，请使用以下内容：

var slides = []
var divs = document.getElementsByClassName('slide-class')
for (var i = 0, l = divs.length; i < l; ++i) {
    slides.push("showcaseSlide" + i)
}

顺便说一句，关于您的代码的几个问题：

不要使用new Array()。相反，请使用[]。请参阅 here 了解原因。
您没有使用var 关键字来声明您的i 变量，这意味着该变量是全局变量。全球是邪恶的。
document.write 是邪恶的。

我猜你的 count 变量以后会有用吗？

【讨论】：

请注意 getElementsByClassName 在 IE8 及以下版本中不可用。
@FlorianMargaine document.write 不是邪恶的，如果你正确使用它（创建一个全新的文档）。与 DOM 操作相比，它的速度快得令人难以置信。显然它不适合OP的代码。
感谢您的指点 :)。是的，计数器是控制将效果应用到哪张幻灯片以及何时重置到开头的计数器。
确实，getElementsByClassName 是not supported in IE8，但是有some solutions 可以跨浏览器使用。

【解决方案2】：

您有编号为 0-9 的 DIV，但您的循环运行了 11 次。

不是实际的代码，但这解释了它。

for(i=0; i<=10; i++){
  0 = 1st 
  1 = 2nd
  2 = 3rd
  3 = 4th
  4 = 5th
  5 = 6th
  6 = 7th
  7 = 8th
  8 = 9th
  9 = 10th
  10 = 11th
}

【讨论】：