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

将数组信息分成每个div

3 个答案: