Question

我希望将JQuery CSS调用（修改CSS以便我可以使用变量）与一些Javascript div / classes相匹配。我不能使用“id”，因为循环中有很多这样的实例。编辑：它仍然不能正常工作，我怀疑我需要更多细节。

CSS的相关部分（还有其他变换线，这里没有显示）：

.thermometer .circle {
    position: absolute;
    ...

.pie {
    position: absolute;
    ...
}

.hold {
    position: absolute;
    ...
    clip: rect(0px, 26px, 26px, 13px);
}

.pieSlice1 .pie {
    background-color: white;
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}

在JST EJS文件中：

 <div class="thermometer">
   <div class="circle <%= this.presenter.newColor(nutrient) %>">
     <div class="pieSlice1 hold">
       <div class="pie"></div>
         <% $(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'}); %>

我删除了“pieSlice1”和“hold”之间的空格，但我是否需要任何其他类才能匹配？

Answer 1

应该是：

.pieSlice1.hold .pie

.pieSlice1和.hold之间没有任何空格

Answer 2

如果你想要一个交集，只需将选择器写在一起，两者之间没有空格。

$(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

当我们包含空间时，它会寻找后代......

另一种选择是：

$(".pieSlice1").filter(".hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

Answer 3

由于.pieSlice1和.hold都是同一元素上的类，因此您需要将它们链接起来：

.pieSlice1.hold .pie

请注意.pieSlice1和.hold之间没有空格 - 这意味着它将匹配具有类.pie的元素，该类是具有<的元素的后代em>两个 .pieSlice1和.hold类。

而你现在拥有的......

.pieSlice1 .hold .pie

这将匹配具有类.pie的元素，该类是具有类.hold的元素的后代，其中本身是具有该类的元素的后代.pieSlice1。

CSS / Javascript / JQuery中的类和选择器匹配

3 个答案: