並聯陣列jquery

Question

基本上與how can you loop through multiple arrays parallel?相同的問題，但使用jQuery來放置一個HTML頁面。

我有一組三個與數組並行的對象。 （這可能成爲一個二維數組）。

{"images":["Bellevue\/images\/1.jpg","Redmond\/images\/1.jpg","Seattle\/images\/1.jpg"], 
"links":["Bellevue\/2.shtml","Redmond\/3.shtml","Seattle\/1.shtml"], 
"projects":["Bellevue","Redmond","Seattle"]} 

我不能爲我的生活弄清楚如何讓他們來填充我的頁面，而它們運行到對方。

所以我可以將數據存儲從$。每個功能是這樣的：

$.ajax({ 
url: 'populate.php', 
dataType: 'json', 
async: false, 
data: "{'images','links','projects'}", 
success: function(data, object) { 
    $.each(data.images, function(index, value) { 
     // maybe something like?: $images = $('.footer').prepend('<img src="'+value+'" />') 
    }); 
    $.each(data.links, function(index, value) { 
     $('.footer').prepend('<a>'+value+'</a>') 
    }); 
    $.each(data.projects, function(index, value) { 
     $('.footer').prepend('<a>'+value+'</a>') 
    }); 
    } 
}); 
}); 

而且在某些HTML創建各自的迭代數組中的每個並行對象：

$('body').append('<div class="wrap"><div class="box"><div class="boxInner"><a href="'+data.links+'"><img src="'+data.images+'"/></a><div class="titleBox">'+data.projects+'</div></div></div>'); 

還是我試圖做到這一點完全錯誤？

謝謝！

Answer 1

您建立的標記在循環，使用索引來訪問與當前迭代陣列對應的陣列值，而這一切都建立後，將其插入到DOM

var html = $([]); 

$.each(data.images, function(index, value) { 
    var wrap = $('<div />', {'class' : 'wrap'}), 
     box = $('<div />', {'class' : 'box'}), 
     inner = $('<div />', {'class' : 'boxInner'}), 
     a  = $('<a />', {href : data.links[index]}), 
     img = $('<img />', {src : value}), 
     title = $('<div />', {'class' : 'titleBox', text : data.projects[index]}); 

    html = html.add(wrap.append(box.append(boxInner.append(a.append(img), title)))); 
}); 

$('body').append(html);