用於循環Firebase更新的Javascript

Question

我有一個使用Firebase的新聞訂閱源，並希望能夠通過單擊「查看」所有新聞項目。

HTML：

<ul id="news" class="dropdown-menu" role="menu"> 
    <li id="newsitem_read">Mark all as read</li> 
    <li id="-K230_cSX_TOYlXfSjul" class="newsitem unread-true">message</li> 
    <li id="-K247s6SLY4AGliAUIik" class="newsitem unread-true">message</li> 
    <li id="-K24820ZIQR8LqThIRFb" class="newsitem unread-true">message</li> 
</ul> 

使用Javascript：

var news = greatnonsens.child('users/<?=$_SESSION['user']['id']; ?>/news_feed/'); 

var read = document.getElementById('newsitem_read'); 

read.addEventListener('click', function() { 

    var to_read = document.getElementsByClassName('unread-true'); 

    // Check news feed is not empty 
    if (typeof to_read[0] !== 'undefined') { 
     for (var i = 0; i < to_read.length; i++) { 
      news.child(to_read[i].id).update({unread: 'false'}); 
      // document.getElementById(to_read[i].id).className = 'newsitem unread-false'; 
      console.log(to_read[i].id); 
     } 
    } 
}); 

這是工作，但如果我還運行的document.getElementById（to_read [I] .ID）.className =「newsitem未讀假'它只會更新每一秒的新聞內容（與Firebase on。（child_changed）功能相同）。如果我發表評論，所有新聞都會更新。

我錯過了什麼？

Answer 1

對getElementsByClassName的調用返回所謂的活節點列表。當您刪除unread-true類時，該元素也將從to_read中刪除。

說你to_read有4個項目開始：

0. item1 
1. item2 
2. item3 
3. item4 

在循環的第一次迭代：i=0，使您免除item1。由於名單是現場，item1也立即從to_read刪除：

0. item2 
1. item3 
2. item4 

在第二次迭代：i=1，使您免除item3。這立即再次刪除是to_read，成爲：

0. item2 
1. item4 

在下一次迭代：i=2，因爲to_read.length現在也是2，我們退出循環。

解決方案

有很多種方式來處理這個問題。我給了那些簡單，這是循環遍歷相反的順序的項目之一：

for (var i = to_read.length-1; i >= 0; i--) { 
     news.child(to_read[i].id).update({unread: 'false'}); 
     // document.getElementById(to_read[i].id).className = 'newsitem unread-false'; 
     console.log(to_read[i].id); 
    } 

有了這個代碼，我們將在i=3開始。當我們從該元素中刪除unread-true類時，它也會再次從to_read中刪除。但是現在在循環的下一次迭代中，i=3和to_read仍然有2個項目，所以循環繼續。