Javascript foreach array key values, output to html

Question

How do I loop thru array keys to output their values to HTML?

The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.

var img=[
    'image01.jpg','image02.jpg','image03.jpg','image04.jpg'
]
var details=[
    'aaaaaa','bbbbbb','cccccc','dddddd'
];

$( "#yin" ).click(function() {
    var img = [0,2];        
    var details = [0,1];

    $(step).each(function() {
        document.getElementById("img").innerHTML();
    });
    $(imgs).each(function() {
        document.getElementById("img").innerHTML();
    });
});


<div class="container">
    <ul class="row-fluid">
        <li class="span4" id="yin">
            <div class="row-fluid">
                <img src="yin.jpg" />
                <h3>Yin</h3>
            </div>
        </li>
        <li class="span4" id="yang">
            <div class="row-fluid">
                <img src="yang.jpg" />
                <h3>Yang</h3>
            </div>
        </li>
    </ul>
    <div class="row-fluid">
        <div class="span12">
            <div class="show-details details">
                <div class="detail-content">

                    <div id="img">
                    <!-- Loop (for yin would be image01, and image03) -->
                    </div>
                    <div id="details">
                    <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.

var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg'];
var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];

$( "#yin" ).click(function() {
    var imgIndices = [0,2];
    var detailIndices = [0,1];

    $("#img").html("");
    $("#details").html("");

    $(imgIndices).each(function(i, o) {
        $("#img").append("<img src=\"" + images[o] + "\"/>");
    });
    $(detailIndices).each(function(i, o) {
        $("#details").append("<p>" + details[o] + "</p>");
    });
});


<div class="container">
    <ul class="row-fluid">
        <li class="span4" id="yin">
            <div class="row-fluid">
                <img src="yin.jpg" />
                <h3>Yin</h3>
            </div>
        </li>
        <li class="span4" id="yang">
            <div class="row-fluid">
                <img src="yang.jpg" />
                <h3>Yang</h3>
            </div>
        </li>
    </ul>
    <div class="row-fluid">
        <div class="span12">
            <div class="show-details details">
                <div class="detail-content">

                    <div id="img">
                    <!-- Loop (for yin would be image01, and image03) -->
                    </div>
                    <div id="details">
                    <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I would take the click function out to a named function though and just pass in the arrays.