Question

如何使用jQuery选择所有应用了特定CSS属性的元素？例如：

.Title
{
    color:red;
    rounded:true;
}

.Caption
{
    color:black;
    rounded:true;
}

如何通过名为“四舍五入”的属性进行选择？

CSS类名称非常灵活。

$(".Title").corner();
$(".Caption").corner();

如何将这两个操作替换为一个操作。也许是这样的：

$(".*->rounded").corner();

有没有更好的方法呢？

Answer 1

这是一个两年前的主题，但它对我来说仍然有用，所以它可能对其他人有用。这就是我最终做的事情：

var x = $('.myselector').filter(function () { 
    return this.style.some_prop == 'whatever' 
});

并不像我想的那样简洁，但除了现在我从未需要这样的东西，而且无论如何它对于一般用途都不是很有效，正如我所看到的那样。

Answer 2

您不能（使用CSS选择器）根据已应用于它们的CSS属性选择元素。

如果你想手动完成这个，你可以选择文档中的每个元素，循环它们，并检查你感兴趣的属性的计算值（这可能只适用于真正的CSS属性，但不是像rounded）这样的人。它也会很慢。

更新以响应修改 - group selectors：

$(".Title, .Caption").corner();

Answer 3

谢谢Bijou。我使用了你的解决方案，但使用了jQuery .css而不是纯javascript，如下所示：

var x = $('*').filter(function() {
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1
})

此示例将选择font-family属性值包含“Futura”的所有元素。

Answer 4

与Bijou相似。只是一点点改进：

$('[class]').filter(function() {
    return $(this).css('your css property') == 'the expected value';
  }
).corner();

我认为使用$（'[class]'）更好：

无需硬编码选择器
不会逐个检查所有HTML元素。

这是example。

Answer 5

这是一个简洁易懂的解决方案：

// find elements with jQuery with a specific CSS, then execute an action
$('.dom-class').each(function(index, el) {
    if ($(this).css('property') == 'value') {
        $(this).doThingsHere();
    }
});

此解决方案不同，因为它不使用角落，过滤器或返回。它是为更广泛的用户提供的。

要替换的东西：

替换＆＃34; .dom-class＆＃34;与您的选择器。
将CSS属性和值替换为您要查找的内容。
替换＆＃34; doThingsHere（）＆＃34;你想要执行什么找到了元素。

Answer 6

自定义CSS属性不是继承的，因此必须直接应用于每个元素（即使使用js动态添加属性，也应该通过添加类来实现），所以......

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

您根本不需要定义round：true属性。只需使用'Rounded'类的存在：

<div class='Title Rounded'><h1>Title</h1></div>
<div class='Caption Rounded'>Caption</div>

JS

jQuery( '.Rounded' ).corner();

使用jQuery选择具有特定CSS的所有元素

6 个答案: