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

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>元素，并使用“橙色”类？

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以及最佳方法之一。