jquery - 将css添加到动态插入的元素

Question

我正在尝试创建一个保持纵横比的网格。我正在使用附加到前一个末尾的 div 元素来执行此操作，直到它填充整个屏幕。我尝试使用 Jquery 将 CSS 应用于动态插入的元素，但它只应用于第一个元素。我有我的代码在这里。

HTML

<div id='layer_grid'>
<div id='grid'>
</div>
</div>

CSS

#grid{
background-color:#c1c1c1;
border:1px solid black;
display:inline-block;
float:left;
}

jQuery

for (var i=0;i<g_num;i++){
$('#grid:last').append('<div id="grid"></div>');
}
$('#grid').css({'width':gw,'height':gh});

这不是我第一次发生这种情况。我不明白。我认为 Jquery 是自上而下的编程。有人可以解释为什么这不起作用以及建议一种方法吗？

Answer 1

ID 选择器映射到 getElementById，它只会返回 ID 的第一个匹配项，因为 ID 应该是唯一的。 $('#grid')将始终选择 id="grid" 的第一个 div

您应该改用一个类或为每个“网格”创建一个唯一的 ID，因为 ID 应该是唯一的。