jquery - 如何使用 jQuery 根据类和 id 更改 CSS

Question

我有以下 html。如何更改 id 为“outerDiv1”的外部 div 内的内部 div 的 css，并将名为 Class1 的类应用于外部 div？在页面中，有多个这样的outerdiv/innerdiv组合，但每种情况下outer div都有不同的id。

HTML

<div class="Class1 Class2" id="outerDiv1" >
   <div class="raDiv" style="position: fixed; background-position: 420px 427px;></div>
</div>

<div class="Class1 Class2" id="outerDiv2" >
   <div class="raDiv" style="position: fixed; background-position: 420px 427px;></div>
</div>

我尝试了以下 jQuery 代码，但它似乎不起作用。

jQuery 更改特定内部 div CSS

$("#outerDiv1 .Class1 .raDiv").css("backgroundPosition", "420px 600px");

Answer 1

元素的ID应该是唯一，因此不要将类选择器与outerDiv1一起使用

使用descendant selector当子级可以在层次结构中向下 n 级时最适合。

$("#outerDiv1 .raDiv").css("backgroundPosition", "420px 600px");

或者 由于 .raDiv 是 #outerDiv1 的直接子级，您可以使用 parent-child选择器

$("#outerDiv1 > .raDiv").css("backgroundPosition", "420px 600px");

编辑 如果这是否是好方法，选择器保留的问题是 id 和 class 之间的空格，因为空格将使其成为后代选择器并在后代中查找 .Class1。您可以通过删除 id outerDiv1 和类 Class1

之间的空格来工作

$("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px");