将数组信息分隔到每个div中

Question

我有一系列信息放置在不同的div中。 我的div的构建是可以的，但所有的信息都被加载到第一个div中。

如何将每个数组项放到相应的div中？

见下面我的JavaScript代码：

$(document).ready(function() { 

var works = { 

    facebook : { 
    image : 'facebook.png', 
    description : 'Description One.', 
    website : 'http://www.facebook.com' 
    },// End facebook 
    google : { 
    image : 'google.png', 
    description : 'Description Two.', 
    website : 'http://www.google.com' 
    },// End google 
    adobe : { 
    image : 'adobe.png', 
    description : 'Description Three.', 
    website : 'http://www.adobe.com' 
    }// End adobe 

};// End var works 

for (var i in works){ 

// Construct the tree of div 
$('<div/>', { 
    'id' : 'workId' + i, 
    'class' : 'work' 
}).appendTo("#workListId"); 

$('<div/>', { 
    'id' : 'workFlipId' + i, 
    'class' : 'workFlip' 
}).appendTo("#workId" + i); 

$('<div/>', { 
    'id' : 'workDataId' + i, 
    'class' : 'workData' 
}).appendTo("#workId" + i); 

$('<div/>', { 
    'id' : 'workDescriptionId' + i, 
    'class' : 'workDescription' 
}).appendTo("#workDataId" + i); 

$('<div/>', { 
    'id' : 'workURLId' + i, 
    'class' : 'workURL' 
}).appendTo("#workDataId" + i); 

// Insert the content in each div 
var pathBegin = '<img src="img/works/'; 
var pathEnd = '"/>'; 

$("#workFlipId" + i).html(pathBegin + works[i].image + pathEnd); 
$("#workDescriptionId" + i).html('<p>' + works[i].description + '</p>'); 
$("#workURLId" + i).html('<a href="' + works[i].website + '">Read more...</a>'); 

}//End for 

$(".work").bind("click",function(){ 

    var $this = $(this); 

    if($this.data('flipped')) 
    { 
     $this.revertFlip(); 
     $this.data('flipped',false) 
    }// End if 

    else 
    { 
     $this.flip({ 
      direction:'lr', 
      color: '#454545', 
      speed: 200, 
      //content: $('.workData').html(), 

      onBefore: function(){ 

       $this.html($this.siblings('.workData').html()); 
      } 

     });// End $this.flip 

     $this.data('flipped',true); 

    }// End else 
});//End function 

}); // End Function 

Answer 1

你正在创建与每个数组元素的同一ID的DIV。 将编号添加到编号，它应该工作。 这是您在jsFiddle中的代码的修改版本：http://jsfiddle.net/u5GcE/4/

Answer 2

就像我在评论中所说的那样，我会用一个对象代替它，它会让你的生活在这里变得更容易。要阅读这样的意大利面条代码并且真正理解你想要达到的目标是相当困难的，所以这不是一个解决方案，而是一个不同的，IMO的更好方法的建议。首先，你works阵列可以被这样表示：

var works = { 
    facebook : { 
     image : 'facebook.png', 
     description : 'The biggest social network in the world.', 
     website : 'http://www.facebook.com' 
    } 
    ... 
}; 

然后你会生成HTML像这样：

for (var work in works) { 

    var img = '<img src="img/works' + works[work].image + '"/>', 
     description = '<p>' + works[work].description + '</p>', 
     website = '<a href="' + works[work].website + '">Link</a>'; 

    ... 

} 

而且，由于你使用jQuery，我会充分利用它。借此，例如：

var work = document.createElement('div'); 
work.id = 'workId'; 
work.className = 'work'; 
... 
document.getElementById("workListId").appendChild(work); 

所有这一切都可以在jQuery中可以写成：

$('div', { 
    'id' : 'workdId', 
    'class' : 'work' 
}).appendTo("#workListId"); 

Answer 3

这个怎么样（JSFiddle）？

var $works = new Array(); 
$works[0] = new Array('facebook.png', 'The biggest social network in the world.', 'http://www.facebook.com/'); 
$works[1] = new Array('adobe.png', 'The leading software developer targeted at web designers and developers.', 'http://www.adobe.com/'); 
$works[2] = new Array('microsoft.png', 'One of the top software companies of the world.', 'http://www.microsoft.com/'); 
$works[3] = new Array('sony.png', 'A global multibillion electronics and entertainment company ', 'http://www.sony.com/'); 
$works[4] = new Array('dell.png', 'One of the biggest computer developers and assemblers.', 'http://www.dell.com/'); 
$works[5] = new Array('ebay.png', 'The biggest online auction and shopping websites.', 'http://www.ebay.com/'); 
$works[6] = new Array('digg.png', 'One of the most popular web 2.0 social networks.', 'http://www.digg.com/'); 
$works[7] = new Array('google.png', 'The company that redefined web search.', 'http://www.google.com/'); 

var $more = "Read more"; 

//Random works 
var shuffle = false; 

$works.sort(function() { 
    if (shuffle == true) { 
     return 0.7 - Math.random(); 
    } else { 
     return false; 
    } 
}); 
//End random works 

function loadWorks() 
{ 
    for (var $loop = 0; $loop < $works.length; $loop++) { 
     var $work = $("<div>"); 
     $work.attr("id", "work"+$loop).attr("class", "work"); 
     var $workFlip = $("<div>"); 
     $workFlip.attr("id", "workFlip"+$loop).attr("class", "workFlip"); 
     $workFlip.html('<img src="img/works/'+$works[$loop][0]+'" >'); 
     var $workData = $("<div>"); 
     $workData.attr("id", "workData"+$loop).attr("class", "workData"); 
     var $workDescription = $("<div>"); 
     $workDescription.attr("id", "workDescription"+$loop).attr("class", "workDescription"); 
     $workDescription.html($works[$loop][1]); 
     var $workURL = $("<div>"); 
     $workURL.attr("id", "workURL"+$loop).attr("class", "workURL"); 
     $workURL.html('<a href="'+$works[$loop][2]+'">'+$more+'</a>'); 
     $workData.append($workDescription).append($workURL); 
     $work.append($workFlip).append($workData); 
     $("body").append($work);   
    } 
} 

$(document).ready(function() { 
    loadWorks(); 
}); 
​