javascript - 如何在javascript中从列表中的HTML保存多个文本对象

Question

我有 8 个 dataString 对象。 “dataString”是我从 attachment1 调用的对象，它是我从 Controller 转发的列表。

这是我的 HTML 代码:

<% int nilai = 0; %>
<c:forEach items="${attachment1}" var="a">
     <div class="w3-image w3-padding">
          <div id="ini">${a.dataString}</div>
          <%=nilai = nilai + 1%>
</c:forEach>

这是我在 javascript 中的代码:

var blob = [];

blob.push(document.getElementById('ini').innerHTML);

var blobLength = blob.length;
console.log(blob);
console.log(blobLength);

但是，当我运行并在网页上显示时，我在检查元素中看到了这个结果:

result on the webpage正如你在图片上看到的，java的结果可以完美地显示在网页上。

result when inspecting element in console但是在控制台中，你可以看到，从 8 个字符串中，在 javascript 列表中输入的字符串只有 1 个。

如何修复？以便我可以将所有 dataString 放入 javascript 的列表中？

Answer 1

您必须更改重复项 id的按普通类(在我的示例中为 ini)，因为标识符在同一文档中应该是唯一的:

<% int nilai = 0; %>
<c:forEach items="${attachment1}" var="a">
     <div class="w3-image w3-padding">
          <div class="ini">${a.dataString}</div>
          <%=nilai = nilai + 1%>
</c:forEach>

然后在你的 JS 中获取类为 ini 的所有元素并使用 foreach 遍历它们使用 .textContent 获取内容属性并将其推送到 blob数组:

var blob = [];

document.getElementsByClassName('ini').forEach( function(item) { ;
    blob.push(item.textContent);
}

var blobLength = blob.length;

console.log(blob);
console.log(blobLength);

注意:您应该关闭 w3-image div 使用 </div>在你的c:forEach循环