66

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

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

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

如何按名为“rounded”的属性进行选择？

CSS 类名非常灵活。

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

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

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

有没有更好的方法来做到这一点？

4

6 回答 6

69

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

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

不像我想要的那么简洁，但我从来没有需要过这样的东西，除非现在，而且在我看来，它对于一般用途来说并不是很有效。

于 2011-08-16T15:15:29.047 回答
40

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

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

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

于 2012-09-27T11:08:33.790 回答
38

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

如果您想手动执行此操作，您可以选择文档中的每个元素，遍历它们，然后检查您感兴趣的属性的计算值（但这可能只适用于真正的 CSS 属性，而不是组成的作为rounded）。它也会很慢。

更新以响应编辑 -组选择器：

$(".Title, .Caption").corner();
于 2009-08-03T06:20:22.857 回答
15

和碧玉的差不多。只是一点点增强：

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

我认为使用 $('[class]') 更好：

  • 无需对选择器进行硬编码
  • 不会一一检查所有 HTML 元素。

这是一个例子。

于 2013-01-14T04:57:17.560 回答
6

这是一个干净，易于理解的解决方案：

// 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();
    }
});

这个解决方案是不同的，因为它不使用角、过滤器或返回。它是为更广泛的用户受众而设计的。

要更换的东西：

  1. 用您的选择器替换“.dom-class”。
  2. 用您要查找的内容替换 CSS 属性和值。
  3. 将“doThingsHere()”替换为您要在找到的元素上执行的内容。

祝你好运！

于 2017-07-22T02:08:34.257 回答
-2

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

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

您根本不需要定义 rounded:true 属性。只需使用“圆形”类的存在：

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

JS

jQuery( '.Rounded' ).corner();
于 2012-09-28T00:02:37.303 回答