Question

Hi i want to access all images under some specific div in javascript.My code is :

<div id="image-container" style="background-image:url(loading.gif)">
        <div class="fade-box" id="image-1"><a href="javascript:GoNext();"><img src="2bscene-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
        <div class="fade-box" id="image-2" style="display: none;"><a href="javascript:GoNext();"><img src="streetgallery-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
        <div class="fade-box" id="image-3" style="display: none;"><a href="javascript:GoNext();"><img src="g4m-logo.gif" alt="" width="330" height="108" border="0" /></a></div>
</div>

While my js code is :

var image_slide = new Array('image-1', 'image-2', 'image-3');

I want to get all DIVs based on id dynamically, not having a predefined array. How can I do that?

Answer 1

With JavaScript, you can do this easily with the DOM:

var container = document.getElementById("image-container");
var child;
var image_slide = [];
for (child = container.firstChild; child; child = child.nextSibling) {
    if (child.id && child.nodeName === "DIV") {
        image_slide.push(child.id);
    }
}

Live Example | Source

Note that the code above must be run after the elements are already in the DOM. The best way to ensure that is to put the script tag below them in the page (just before the closing </body> element is good).