javascript - 画像フォルダーを反復し、画像を順序付けられていないリストに追加するJavaScript

Question

このスクリプトが機能しない理由を正確に把握しようとしています。最初は div と次の ul が原因だと思っていましたが、追加の ID を ul に割り当てた後も機能しません。今夜これを理解する必要があるので、すべての助けに感謝します。

HTML

<div id="Home-Image">   

    <h1>Images</h1>
    <ul id="Home-Images">
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <li><a href="#"><img src="" width=100 height=100/></a></li>
        <button id="toggle-two">View more Images</button>
    </ul>

JavaScript

$(document).ready(function() {
var files = {'jpg':4};
var pageName = "d";
for (var ext in files){
for (var i = 0; i < files[ext]; i++){
var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;}
var img = new Image(); 
img.src = src;
var container = document.getElementById('Home-Images');
container.appendChild(img);
}});    

Answer 1

多分あなたはこのようなものが欲しい

$(document).ready(function() {
    var files = {'jpg':4}, pageName = "d", container = $('#Home-Images');
    for (var ext in files)
    {
        for (var i = 0; i < files[ext]; i++)
        {
            var src = "../Images/D/allimages" + pageName + "-" + (i+1) + "."+ext ;
            var img = $('<img src="'+src+'" width=100 height=100 />'); 
            container.append($('<li/>').html($('<a/>', {'href':'#'}).html(img)));
        }
    }
}); 

ただし、このパスhttp://yourDomain/Images/D/allimagesd-1.jpgがすべての画像に対して正しいことを確認してください。ここにデモがありますが、画像は利用できませんが、ブラウザの検査ツールでソースを見ることができます.

Answer 2

変更されたコード: jsfiddle

HTML:

<div id="Home-Image">   

    <h1>Images</h1>
    <ul id="Home-Images">

        <button id="toggle-two">View more Images</button>
    </ul>​

JS:

$(document).ready(function() {
    var files = {'jpg':4};
    var pageName = "d";
    var html = "", src;
for (var ext in files){
     for (var i = 0; i < files[ext]; i++){
         src = "../Images/D/allimages" + pageName + "-" + (i+1) + "." + ext;
         html += '<li><a href="#"><img src="'+ src +'" width=100 height=100/></a></li>';

     }

    $("#Home-Images").prepend(html );
}}); ​