javascript - 当它们都具有相同的类名时，将信息附加到单独的 div

Question

我有一堆具有相同类名的 div。我遍历一些信息，将每个信息放入一个 div 中。我想将它们附加到单独的 div 中，但它们都具有相同的名称这一事实阻碍了我进行此过程。它不是将它附加到当前模式，而是将所有信息附加到具有该类名的所有 div。我怎样才能解决这个问题？

Answer 1

您可以使用 JQuery 的“每个”循环。

$(".className").each(function(e){
    $(this).html("new content"); // $(this) will give you the reference of your current element.
});

Answer 2

你可以像 Gaurav 说的那样循环。如果您知道数据将匹配 div 的顺序，这将很好地工作。如果您想将项目放置在特定位置（也就是数据的输出顺序与 div 的顺序不同），并且如果 jQuery 是一个选项（您没有指定），您可以使用jQuery 的 eq() 选择器。这样做，您可以选择（来自 jQuery 的 API 文档）这样选择第三个 td：

<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>

<script>
$( "td:eq( 2 )" ).css( "color", "red" );
</script>

话虽如此，如果您能够并且有意义，我建议您明确识别您的 div。编写基于定位将某些数据与 DOM 中的特定元素匹配的 JavaScript 很容易出错 - 特别是如果有人跟着你处理代码并且不知道这种可能的“魔法”。

Answer 3

$outer = document.getElementsByClassName('outer');

for(var i = 0; i < $outer.length; i++) {
    $outer[i].onclick = function () {
        alert();
    }
}

这会成功的。您需要遍历所有类并分别应用操作。