Question

使用现实代码更新了问题： 我有这个

jQuery("dt").has("a.is-expanded").addClass("is-expanded");

和

<dt><a href="#accordion1" class="accordion-title accordionTitle js-accordionTrigger is-collapsed is-expanded" aria-expanded="true">Our services</a></dt>

我希望这会将is-expanded类添加到dt，因为它包含一个带有is-expanded类的a。但这不会发生，我不明白为什么？如果我只是把它然后它起作用，但是如果我把a.is-expanded。我做错了什么？

Answer 1

我怀疑你的JS代码是在is-expanded元素（可能是body-onload）上设置a类之前执行的。

此外，您可以将选择器优化为：

jQuery("dt:has(a.is-expanded)")`

这意味着jQuery只返回一个包含实际拥有相关子节点的dt的列表，这比返回所有dt更快（特别是如果有很多这样的话），然后使用另一个选择调用过滤该列表。

Answer 2

使用class selector限定a中的.has()：

jQuery("dt").has("a.selected").addClass("red");

Answer 3

您可以在has()选择器中添加create课程。

要在手风琴发生变化时触发代码，请听取手风琴上的activate和jQuery("dt").has("a.is-expanded").addClass("is-expanded");事件：https://api.jqueryui.com/accordion/#events

.is-expanded {background:red}
.is-expanded a {color: yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dt><a href="#accordion1" class="accordion-title accordionTitle js-accordionTrigger is-collapsed is-expanded" aria-expanded="true">Our services</a></dt>
<dt><a href="#accordion1" class="accordion-title accordionTitle js-accordionTrigger is-collapsed" aria-expanded="true">Other</a></dt>

<ul>

选择具有特定类的子项的父项

3 个答案: