如何遍歷新生成的數組而不覆蓋它？

Question

我一直在學習自己編寫代碼，因此我的知識沒有您期望的那么專業。 話雖如此，我在一個處理圖像的項目中，其中包括使用fileList對象向用戶顯示有關圖像的信息，該信息的一部分以這種格式顯示： Chrysanthemum.jpg（圖像/ jpeg）-879394字節，上次修改時間：2009年13月7日 。 我的程序允許用戶在上傳其余文件之前刪除預選的文件，當從組中刪除該項目時，有關該文件的信息也應保留。 我不會因為讀+ 600行代碼而使您發瘋，因此您可以解決我的問題，因此，我為您提供了一個關於我的問題的非常簡單的概括方法。

在這種情況下，我們想在調用函數時刪除第一項，因此請看下一個代碼：

<input type='button' id='load' value='Load_info' />
<div id='ok'>
    <ul id='pic_info'></ul>
</div>
<div id='message'></div>
<input type='button' id='bye' value='Bye[0]' />


var files = ["Chrysanthemum.jpg (image/jpeg) - 879394 bytes, last modified: 13/7/2009", "Desert.jpg (image/jpeg) - 845941 bytes, last modified: 13/7/2009", "Hydrangeas.jpg (image/jpeg) - 595284 bytes, last modified: 13/7/2009", "Jellyfish.jpg (image/jpeg) - 775702 bytes, last modified: 13/7/2009", "Koala.jpg (image/jpeg) - 780831 bytes, last modified: 13/7/2009", "Lighthouse.jpg (image/jpeg) - 561276 bytes, last modified: 13/7/2009", "Penguins.jpg (image/jpeg) - 777835 bytes, last modified: 13/7/2009"];

var once = 0;
var a = '';
var d = '';
//someFlag = true;
//var upd = [];
var e;
var f = '';
var g = 0;

function load() {
    for (var i = 0; i < files.length; i++) {
        a += "<li>" + files[i] + "</li>";
        $("#pic_info").html(a);
        e = $("#pic_info li").length;
    }
}



function delete_item(arr, inx) {
    if (e <= 0) {
        e = 7;
    } else {
        e -= 1;
    }
    //for (var c = 0; c < arr.length; c++) {
      //  d += "<li>" + arr[c] + "</li>";
        //$("#pic_info").html(d);
    //}
    arr.splice(inx, 1);
    $("#pic_info").html(arr);
}

$("#load").click(function () {
    if (once == 0) {
        load();
        once = 1;
    } else {
        $("#message").html("<strong>files already loaded</strong>");
    }
});

$("#bye").click(function () {
    delete_item(files, 0);
}); 

我還沒有找到一種有效的方法來重新排列“ li”標簽中的“ arr”項目，我試圖遍歷它們，但是如果您啟用“ for循環”以使數組本身發生，則會被新的輸出覆蓋直到到達最后一個項目。 我嘗試了很多方法來解決這個看似簡單的問題，但是我做不到……我放棄了，並決定從有更好狀態的人那里尋求幫助。

PD：我知道有上千個用於處理文件的插件。 我只是想測試一些學到的技能。

這是一個小提琴：* jsfiddle

感謝您的寶貴時間，我非常感激，也希望自己能向我解釋一下

Answer 1

我不是100％知道您的要求，但是我相信您的要求是在加載文件后如何刪除第一個li元素。 那是對的嗎？

如果是這樣，您可以僅在刪除項中使用jQuery選擇器，它將刪除第一個li，但不影響files數組。

$("li").first().remove();

Answer 2

如果您想使用.append()放置新數據而不會覆蓋舊數據，我可以看到您正在使用.html()這會將html設置為舊的html。 使用.append()代替