Разрыв цикла на основе несуществующего элемента

Question

Я создал cms, которая позволяет пользователям добавлять до 10 изображений в слайд-шоу, которые выводятся во внешнем интерфейсе в div с идентификаторами showcaseSlide с числом от 0 до 9, добавленным в конце, например, showcaseSlide0, showcaseSlide1 и т. д. Для javascript, который управляет слайд-шоу, мне нужно вывести все div-идентификаторы в массив, но завершить массив, когда слайды закончатся, например, если div-идентификаторы вышли из 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
};

Edit:

Я обнаружил (благодаря Teemu, который прокомментировал ниже), что он не работал, потому что он вызывался перед загрузкой страницы, а значит, до визуализации объектов. Я также должен поблагодарить Питера Келли (который также прокомментировал ниже), который указал, что мне нужно использовать! в моем нарушении 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 с номерами 0-9, но ваш цикл выполняется 11 раз.

Не фактический код, но это объясняет это.

Answer 2

Я бы не был таким сложным. Я полагаю, у вас есть класс для всех ваших слайдов 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 будет использоваться позже?