jQuery .prepend顛倒了數組？

我有一個對象數組，我從頁面上抓取圖像並顯示，只顯示一次，最後一個顯示第一個，第一個顯示最後一個 - 向後。如果我使用.append（），那麼它的順序是正確的，但是在語義上我需要使用.prepend（），這樣我的html元素才能正確顯示。有什麼建議嗎？我無法在網上找到任何關於造成這種情況的信息。指向文檔描述此行爲的鏈接也將非常棒！jQuery .prepend顛倒了數組？

這裏是jQuery代碼：

for (var i = 0; i < skills.length; i++) { 
    var icon = '<img id="' + items[i].id + '" class="item-img-lg" data-toggle="modal" data-index="'+ i +'"src="' + items[i].iconurl + '" />'; 
    $('#items-large').prepend(icon); 
};

來源

2016-10-03 Varvara Jones

'.prepend（）'將始終插入參數作爲父項的第一個子項。我不明白爲什麼你必須使用'.preprend（）'「語義」。 '.append（）'似乎正是你所需要的：你想*追加數組中的每個元素到父項。 –

謝謝。你有一個好點。我在HTML中重新組織了我的代碼，現在一切都很好。 :) –

Prepend不顛倒數組。在第一個循環中，你的第一個技能被添加到你的＃項目的前面 - 大。這很好，因爲你可能希望第一個成爲項目中的第一個圖標 - 很大！但是，在第二個循環中，第二個圖標被添加到前面（前置）到＃items-large。啊!現在第一個圖標實際上是最後一個，第二個圖標是第一個！這對所有圖標都是重複的，最後，數組中的最後一個圖標位於前面或第一個圖標，而數組中的第一個圖標位於後面或最後一個。

並且根據＃items-large中的其他內容，您可能也不想使用append。

想象一下以下內容：

<div id="items-large"> 
<!-- prepended icons go here --> 
    <h1>My awesome icons</h1> 
<!-- appended icons go here --> 
</div>

和追加仍將導致的圖標相同的順序不正確！

你足夠聰明，找出從這裏做的，但如果你需要一個解決方案：

您可以通過手扭轉你的圖標在陣列中，或者你可以叫反向（）上你的數組開始預先添加它們。

來源

2016-10-03 22:04:13

想通了，但感謝解釋如何添加項目！這真的很有幫助。我需要不斷了解對象的上下文！ –

而不是遞增你可以嘗試遞減的循環或array.reversing，如果你選擇還是遞增循環？

來源

2016-10-03 21:53:04 alanmbarr

您可以使用.reverse()方法「倒置」數組中的元素。

然後使用.append()。

// Reverse the array order 
items = items.reverse(); 

for (var i = 0; i < skills.length; i++) { 
    var icon = '<img id="' + items[i].id + '" class="item-img-lg" data-toggle="modal" data-index="'+ i +'"src="' + items[i].iconurl + '" />'; 
    $('#items-large').append(icon); 
};

來源

2016-10-03 21:56:31

使用.reverse（）方法會給出「不是函數」的錯誤。 –

'items'是一個數組嗎？或者它應該是'技能'也許？ –

jQuery .prepend顛倒了數組？

回答

相關問題