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

IT技术 javascript jquery css jquery-selectors
2021-01-16 06:50:31

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

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

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

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

CSS 类名非常灵活。

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

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

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

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

6个回答

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

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

不像我想要的那么简洁,但除了现在,我从来不需要这样的东西,而且在我看来,它对于一般用途来说效率并不高。

谢谢你,碧瑶。我使用了您的解决方案,但使用了 jQuery .css 而不是纯 javascript,如下所示:

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

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

是的,这个也对我有用。我保存它的一个有效的 jsfiddle,以备将来参考。
2021-03-17 06:50:31
虽然这可行,但请注意,这是一项非常繁重的操作,具体取决于 DOM 大小。如果您只需要页面的一部分,则将范围限制为该部分。如果整个页面都需要这个,那么你可能需要在 css 级别而不是通过 JS 更改它。
2021-04-04 06:50:31
你刚刚让我摆脱了 3 个小时的脑痛……+1
2021-04-07 06:50:31

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

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

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

$(".Title, .Caption").corner();
2021-03-25 06:50:31
@RobertHarvey——是的。请注意,在第 1 段中,我用“使用 CSS 选择器”来限定它的不可能性。第 2 段描述了一种变通方法。与问题相关的答案有很多,但投票分数为正的答案是我所描述的工作的示例。
2021-04-06 06:50:31

类似于碧瑶的。只是一点点增强:

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

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

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

这是一个例子

如果您有诸如div.special > span > a.
2021-04-06 06:50:31

这是一个干净,易于理解的解决方案:


// 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()”替换为您要在该找到的元素上执行的操作。

祝你好运!

有人审查并删除了“祝你好运!” 我的帖子结束。所以现在我不能祝人们好运了吗?我已经回滚了我的答案。
2021-03-22 06:50:31