Question

请考虑以下事项：

<style>
   #foo{color:red}
</style>
<div>
    <div id='foo'>A</div>
    <div>B</div>
    <div style="color: red">C</div>
</div>

如何获取具有某些特定css规则的所有DIV（例如，它们的颜色为红色）？是否有任何插件可以扩展jQuery选择器以接受css规则（例如$('ul li{color:red;width:50px} span')？

Answer 1

根据您的问题

How to fetch all DIVs that have some specific css rules (e.g. their color are red)?

$.each($('*'), function () {
    if ($(this).css('color') == 'rgb(255, 0, 0)') {
        alert($(this).text());
     }
 });

This will get all elements with color Red

Live Demo

<强>加成

由于 * 将选择Dom中的所有元素，我们可以通过指定我们要查找的元素类型来缩小搜索范围。例如，我们只有div元素，因此我们可以使用

$.each($('div'), function () {
    if ($(this).css('color') == 'rgb(255, 0, 0)') {
        alert($(this).text());
     }
 });

Answer 2

试试这个：

$("body").find("div:hidden")

Answer 3

试试这个

$("div[style*=display:block]")

Answer 4

您可以尝试使用attribute selectors。

document.querySelectorAll('[style="display: none"]')

但这需要您的style属性始终格式化......

如果您希望获得具有特定css属性的所有元素（不仅仅是style=属性），您可能需要通过{查看{来手动执行此操作{3}}

Answer 5

您可能无法依赖:hidden，因为它会选择

CSS显示值为none。
它们是type =“hidden”的表单元素。
它们的宽度和高度明确设置为0.
隐藏了一个祖先元素，因此页面上不会显示该元素。

所以试试

$('div').filter(function () {
    return $(this).css('display') == 'none';
}).doSomething()

CSS规则选择器（例如$（'ul li {color：red; width：50px} span'）

5 个答案: