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

Question

我构建了一个cms，允许用户将最多10张图像添加到幻灯片中，所有这些图像都在前端的div中输出，带有showcaseSlide的id，并在末尾附加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 语句中，Frazer 指出我的循环 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);

};

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

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