獲得前一個元素在循環

EDIT 2（使問題更容易理解）獲得前一個元素在循環

我想達到的效果是：每次一個元素進入檢視一個「是可見的」類添加到它和相同的'可見'類是從前一個元素中刪除。

現在我已經設法使其工作，但我運行for循環刪除所有is-visible類，然後將is-visible類添加到視口中的元素。

它的工作原理，但在性能方面，我認爲最好從element[i -1]中刪除該類。而這是我無法得到它的工作。

這裏是一個簡化小提琴，我試圖使element[i-1]解決方案工作：https://jsfiddle.net/epigeyre/vm36fpuo/11/。

EDIT 1（回答一些問題）

我以一個模運算修正通過@Catalin揚庫（非常感謝您提出的寶貴幫助）提出的一個問題（(i+len-1)%len ）。

原來的問題（真不明白）

我想用下面的代碼來獲取前一個元素在for環（改變其類）：

for (var i = 0; i < array.length; i++) { 
    if(array[i-1] && my other conditions) { 
     array[i-1].classList.remove('is-visible'); 
     array[i].classList.add('is-visible'); 
    } 
}

但它不會刪除[i-1]元素的類。

這裏是我的模塊的代碼更完整的一塊（這是一個scroll事件偵聽內運行）：

var services = document.getElementsByClassName('services'), 
    contRect = servicesContainer.getBoundingClientRect(); 

for (var i = 0; i < services.length; i++) { 
    var serviceRect = services[i].getBoundingClientRect(); 

    if (!services[i].classList.contains('active') && Math.round(serviceRect.left) < contRect.right && services[i-1]) { 
     services[i-1].classList.remove('is-visible'); 
     services[i].classList.add('is-visible'); 
    } 
}

感謝您的幫助！

來源

2017-09-27 Pipo

嗯，不，它只會得到前一個。但由於它在for循環中，所以每次迭代都會得到前一個循環。 – stybl

這句話沒有任何意義'但是看起來[i-1]正在獲取所有以前的元素，而不是前一個元素。「 - 這確實只能讀取數組中的前一個實例。 PLease提供一個[mcve]來演示你確切的問題。 – Jamiec

在第一次迭代中，我是0 ...因此，您得到的所有元素可能是因爲您引用了0-1 = -1數組元素...或者您需要爲此獲取錯誤。 – golddragon007

您的if(array[i-1] && my other conditions)總是如此，除非第一種情況array[-1]不存在。因此，它將刪除併爲每個元素添加active類，這將使得看起來只有第一個元素的類已被刪除。

你需要的是一個更好的if條件或break聲明，當不再

for (var i = 0; i < array.length; i++) { 
    if(array[i] && i != array.length - 1) { 
     array[i].classList.remove('active'); 
    } 
} 
array[array.length - 1].classList.add('active');

來源

2017-09-27 15:10:01

所以這意味着'if（array [i-1]）'不足以防止這種情況發生？ – Pipo

是的，因爲'if（variable）'只驗證該變量是否與undefined或其他等價值不同，比如0，「」等。由於您的元素存在，它將始終驗證爲真。 –

不，因爲你的數組元素是DOM對象，其類是'services'。它們不會評估爲簡單的值，如0或-1。我已經編輯了我的答案，以包含一個更可能的解決方案，正是你想要的。 –

需要循環中的問題可能是，根據您的代碼：services[i-1].classList.remove('active');和services[i].classList.add('active');「活動」類，你在當前迭代中添加將在下一次迭代中被刪除！

所以你的代碼有邏輯錯誤，數組索引不返回所有的prev項目！

來源

2017-09-27 15:13:04

是的，但這就是我想要的，每當滿足條件時，前一個活動類都必須移除。我不是這樣想的嗎？ – Pipo

如果您創建一個包含前一個元素的變量，該怎麼辦？

var previous = array[0]; 
for (var i = 0; i < array.length; i++) { 
    if(previous && my other conditions) { 
     previous.classList.remove('active'); 
     array[i].classList.add('active'); 
    break; 
    } 
    previous = array[i]; 
}

來源

2017-09-27 15:28:31 Sara

我也試過了......如果你想看看，我已經發布了一個jsfiddle的問題:) – Pipo

獲得前一個元素在循環

回答

相關問題