如何通過類使用獨特的子數據通過JS更新多個元素？

總之，我有5-10事件我從外部服務器接收看起來像一個字符串：如何通過類使用獨特的子數據通過JS更新多個元素？

event: add 
data: { "hostname":"name", "properties": {"info": "50"}} 

event: add 
data: { "hostname":"name2", "properties": {"info": "45"}} 

event: add 
data: { "hostname":"name3", "properties": {"info": "67"}}

等等，等等。

而且我通過EventSource的JS處理它們像這樣：

var source = new EventSource("http://XXX.XXX.XXX.XXX:PORT/") 
source.addEventListener('add', onAdd) 

function onAdd(e) { 
    var data = parse(e) 

    var output = document.getElementById('append'); 
    var ele = document.createElement("div"); 
    var frag = document.createDocumentFragment(); 
    frag.appendChild(ele); 
    ele.setAttribute("class", 'row sub-item'); 
    ele.innerHTML ="<ul>" 
       +"<li>" + "<span id=name>" + data.hostname + "</span>" + "</li>" 
       +"<li>" + "INFO: " + "<span id=info>" + data.properties.info + "</span>" + "</li>" 
       +"</ul>" 
       +"</div>" 
    output.appendChild(frag); 
}

此代碼成功地將每一個DIV和它裏面的無序列表到頁面上。

我的問題是，我有一個像另一組未來事件：

event: update 
data: { "hostname":"name", "properties": {"info": "65"}} 

event: update 
data: { "hostname":"name2", "properties": {"info": "35"}} 

event: update 
data: { "hostname":"name3", "properties": {"info": "15"}}

等。

而這些來自於服務器和每隔一段時間發送新信息財產。我不能找到一種方法，通過使用跨類（<span class="info"）來更新所有的獨特信息特性，因爲如果我排序類其更新的每一個信息屬性頁面上與相同數量（ name1 45 name2 45 name3 45），我不能使用id（<span id="info"），因爲它只會更新第一個，因爲id只能在頁面上使用一次。

我知道必須有一個簡單的解決方案，我忽略了這一點。謝謝！

來源

2016-03-07 KILLADELPHIA

您可以通過爲每個跨度添加data-id屬性來使用數據集，然後僅更新匹配項。

你也可以改變你的ID來info_45等，並獲得ID爲每個跨度，並使用正則表達式來獲取ID cleanID = idFromSpan.match(/\d+/g)[0];

來源

2016-03-07 09:35:22 turbopipp

感謝您的輸入。我能夠通過將span id設置爲data.id屬性，然後使用document.getElementByID（data.id）.innerHTML = data.properties.info;替換span中的內容來實現此目的。再次感謝您的幫助c： – KILLADELPHIA

如何通過類使用獨特的子數據通過JS更新多個元素？

回答

相關問題