如何在Javascript/jQuery中動態切片數組？

我有一個照片庫，其中包含將不斷上傳的圖像。 PHP數組已被轉換/編碼爲JSON數組，以便我可以使用JavaScript處理數據。如何在Javascript/jQuery中動態切片數組？

理想情況下，我想單擊一個按鈕（CodePen示例中的「下一個設置」）並加載下一組（2個）縮略圖圖像。這是爲了不加載所有的圖像，可能是數百個。

問題：我無法弄清楚如何動態點擊數組（點擊5張圖片）。我當然可以一次加載2個，例如：

myArray.slice(0,2); 
myArray.slice(3,5);

但是，這不起作用，因爲圖片將不斷添加到圖庫中。此外，我將不得不有太多的上述集合，以保持一次切片5。

我曾嘗試：

分裂陣列成更小的陣列
for迴路和$.each環

我基本上需要能夠移動的切片的開始和結束索引通過（例如）2點擊。現在它只是保持切片相同的兩個圖像，因爲切片不是動態的。

這裏是我的CodePen

來源

2017-04-07 Kevin Marmet

只需跟蹤全局變量中的索引並每次點擊五次即可增加。然後'。切片（索引，索引+ 5）; index + = 5;' –

或者如果你不關心原始數組（如果你不關心它是否變爲sgrunk），你可以使用[**'splice' **]（https：//developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice）從數組中刪除項目！每次調用'.splice（0，2）'時，都會得到不同的元素，因爲之前的元素已經從原始數組中刪除了！ –

@ibrahimmahrir謝謝！我將不得不嘗試。我之前嘗試過.splice，但無法立即開始工作，並且專注於.slice（）。我再給它一次！ –

我不認爲有一種方法做你想要什麼，但你可以跟蹤你在哪裏數組中，並做了切片從那裏，像這樣：

var nextSet = myArray.slice(lastIndex, lastIndex + 2);

替換現有的click()本（包括lastIndex的聲明）來試試吧：

var lastIndex = 0 
$('.button').click(function() { 
    var nextSet = myArray.slice(lastIndex, lastIndex + 2); 
    lastIndex += 2; 
    for (var i = 0; i < 2; i++) { 
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextSet[i] + '>'); 
    } 
});

注意我已將slice()行移至for循環之外。無需爲每次迭代分割新陣列。

這裏是CodePen using .slice()。

的另一種方法是使用對shift()剝離的第一項陣列中在每次迭代：

var nextItem = myArray.shift()

這是破壞性雖然（它從原始數組中刪除項目），所以你」如果你想用其他任何東西，你需要首先複製原始數組。更換你click()有：

$('.button').click(function() { 
    for (var i = 0; i < 2; i++) { 
    var nextItem = myArray.shift(); 
    var li = $('<li/>').attr('role', 'menuitem').appendTo('.myList').append('<img src=' + nextItem + '>'); 
    } 
});

這裏有一個CodePen using .shift()。

來源

2017-04-07 23:06:09 Robert

謝謝！ .shift（）方法似乎正是我所期待的！再次，非常感謝你。一直在爲此工作。你搖滾！ –

@KevinMarmet很高興爲你效勞！ – Robert

你的問題很簡單，我認爲。你做一個切片和百達得到相同的陣列

var array = [0,1,2,3,4,5]; 
let newArray1 = array.slice(0,2); // returns a new array 
let newArray2 = array.slice(0,2); // returns the same new array 

for(var i = 0; i < 2; i = i+2) { 
    result = array.slice(i, i+2); 
    console.log(result); 
}

來源

2017-04-07 23:03:59 TypedSource

如何在Javascript/jQuery中動態切片數組？

回答

相關問題