javascript - 是否有更简洁的方法来选择包含某些类的祖先元素中的元素

Question

我根据祖先元素是否包含类在我的代码中选择了很多元素，并且想知道是否有更简洁的方法来做到这一点。

例如，选择所有<p>和 <blockquote>嵌套在 <div> 中的元素或 <main>元素，它有类“橙色”，我正在写。

$('main.orange p, div.orange p, div.orange blockquote, main.orange blockquote').css('background-color', 'orange');

这完成了我想要的，但是写出 div.className element, main.className element 有点乏味对于我要选择的所有元素。有没有办法选择所有 <p>元素嵌套在类为“orange”的任何祖先中？

Answer 1

如果您没有其他标签使用同一类，您可以考虑跳过标签名称。此外，使用笛卡尔方式将帮助您最小化此选择器:

$(".orange").find("blockquote, p");

这是最好的简化方法之一。或者，如果您特定于标签:

$("main.orange, div.orange").find("blockquote, p");

上面是一个精确的简化，虽然我倾向于使用比上面的样式更多的第一种样式，只要类名不被其他元素使用并且我不想选择它们。

另外，我注意到您在元素上设置了一些 CSS 属性。我恳请您仅将 jQuery(或 JavaScript)用于交互并完全使用 CSS 进行演示。

有一个类，比如 .js-orange 并将其应用于所有这些元素。对于他们，在 CSS 中尝试添加:

.orange-applied {background-color: orange;}

然后在 jQuery 中，只需执行以下操作:

$(".js-orange").addClass("orange-applied");

这样，您将能够以编程方式toggleClass 或removeClass，这是最好的方法之一。