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

Question

我构建了一个cms，允许用户将最多10张图像添加到幻灯片中，这些图像都以div的形式在前端输出，并在末尾附加从0-9开始的数字，例如showcase Slide0、showcase Slide 1等。对于控制幻灯片的javascript，我需要将所有div id输出到一个数组中，但在幻灯片结束时结束数组，例如，如果div id从showcase Slide0到showcase Slide 3，我需要数组从幻灯片[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声明中，弗雷泽指出我的循环太大了。

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

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);
};

Answer 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()。相反，请使用[]。请参阅此处了解原因
• 您没有使用var关键字来声明i变量，这意味着该变量是全局的。全球化是邪恶的
• document.write是邪恶的

我想您的count变量稍后会有一些用处吗？

Answer 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
}