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

Question

我正在尝试创建一个保持宽高比的网格。我使用div元素执行此操作，该元素附加到上一个结尾，直到它填充整个屏幕。我尝试使用Jquery将CSS应用于动态插入的元素，但它仅适用于第一个。我有我的代码here。

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应该是唯一的。