jquery - 如何将样式应用于动态添加的 div？

Question

我有一个观点，其中 kendo 框架根据用户点击通过 JQuery 动态添加下拉菜单。让我们将它们命名为 A、B 和 C。

页面加载时的div是这样的

<div id="fieldSet">
</div>

在用户开始点击这些下拉 div 后开始添加。

我想设置这些下拉菜单的样式和左侧位置，例如 A 为 40%，B 为 50%，C 为 60%。

我可以使用什么类型的选择器？由于剑道会根据用户点击动态添加下拉菜单。如果用户首先点击 B 内容类型，则将首先添加内容类型 b。如果用户单击 A，则将首先添加它。这是它的 html:

<div id="fieldSet">
      <div  class ="fieldSetDropDown"> Drop down  A</div>
      <div  class ="fieldSetDropDown"> Drop down B</div>
      <div  class ="fieldSetDropDown"> Drop down C </div> 
</div>

那么在这种情况下如何设置左侧位置呢？？？

注意:正如我提到的，它是通过外部 jquery 库 kendo 添加的，我无法控制它的添加方式，因此我无法修改它添加的 html。我也不允许添加任何 jQuery 或 JavaScript 代码。我只有添加 css 的权限。

---

我尝试过但失败的方法:我尝试了类似的兄弟选择器

#fieldSet .fieldSetDropDown{
left:40%
}

#fieldSet .fieldSetDropDown~ .fieldSetDropDown{
left:50%
}

#fieldSet .fieldSetDropDown~ .fieldSetDropDown ~ .fieldSetDropDown{
left:60%
}

这工作正常，但前提是我按顺序 a、b 和 c 单击内容类型。但如果我不遵循它不遵循的顺序。假设如果我先点击 B 下拉菜单，它将是第一个添加的 div，它将向 B 应用 40%。主要问题是这些下拉菜单没有 ID，只是同一个类“fieldSetDropDown”。

Answer 1

试试nth-child选择器:

.fieldSetDropDown:nth-child(1) {
left:40%
}

.fieldSetDropDown:nth-child(2) {
left:50%
}

.fieldSetDropDown:nth-child(3) {
left:60%
}

顺便说一句:您的 HTML 中有错别字:“classes”必须是“class”