javascript - 如何通过 JS 使用唯一子数据按类更新多个元素？

Question

简而言之，我从外部服务器接收到一串 5-10 个事件，如下所示:

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 和其中的无序列表添加到页面上。

我的问题是我还有另一组 future 事件，例如:

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

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

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

等..

这些来自服务器并经常发送新的 info 属性。我找不到使用跨度类 ( <span class="info" ) 更新所有唯一 info 属性的方法，因为如果我按 class 它用相同的数字(name1 45 name2 45 name3 45)更新页面上的每个信息属性，我不能使用id(<span id="info")因为那时它只会更新第一个，因为 id 只应该在您的页面上使用一次。

我知道必须有一个我忽略的简单解决方案。谢谢!

Answer 1

您可以通过向每个跨度添加 data-id 属性来使用数据集，然后仅更新匹配项。

您还可以将您的 ID 更改为 info_45 等，并获取每个跨度的 ID，并使用正则表达式获取 ID cleanID = idFromSpan.match(/\d+/g)[0];