将数组信息分隔到每个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

就像我在评论中说的那样，我会使用一个对象来代替，它会让你在这里的生活变得更容易。阅读这样的意大利面条代码并真正理解你想要实现的东西是相当困难的，所以这不是一个解决方案，而是一个不同的，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 2

您正在为每个数组元素创建一个具有相同id的div。将编号添加到id中，它应该可以工作。以下是您的jsFiddle代码的修改版本：http://jsfiddle.net/u5GcE/4/

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();
});
​