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

【问题标题】：Adding css to dynamically inserted elements将css添加到动态插入的元素
【发布时间】：2013-06-28 21:36:38
【问题描述】：

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

HTML

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

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

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

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

【问题讨论】：

您不能将id 用于多个元素。这就是 jQuery 将其默认为第一个元素的原因。你必须改用类。
我们是否假设 gw 和 gh 是在您未显示的某个地方计算的？
好吧，如果您选择，您可以使用多个给定 ID，这在某些人看来是不正确的。但它也有缺点。例如某些搜索引擎的无效标记处罚。 JavaScript 喜欢假设在使用 ID 时只能找到一个 ID，并且通常会将其应用于页面上找到的第一个 ID。 class 将适用于所有人的地方（但同样有一些玩耍，您可以以相同的方式使用 class 或 id ，尽管在任何地方都没有被认为是正确的用法）

【解决方案1】：

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

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

【讨论】：