2009-08-03 149 views
48

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

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

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

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

CSS类名非常灵活。

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

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

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

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

+11

嘿,伙计们:*请在回答之前阅读问题*!这个可怜的人得到了四分之四的完全错误的答案。 – Boldewyn 2009-08-03 06:22:49

回答

30

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

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

更新响应编辑 - group selectors

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

+1为目前唯一的答案解决问题:-) – Boldewyn 2009-08-03 06:24:39

+0

@Quentin:这个答案是否正确?见http://stackoverflow.com/questions/10651508和http://api.jquery.com/css/和http://meta.stackexchange.com/questions/132958/question-closure-incorrect#comment368460_132958 – 2012-05-18 15:22:15

+1

@RobertHarvey - 是的。请注意,在第1段中,我通过“使用CSS选择器”来限定它的不可能性。第2段描述了一项解决方法。与问题相关的问题有很多答案,但具有积极投票分数的答案是我描述的工作的例子。 – Quentin 2012-05-18 15:30:12

54

这是一个两岁的线程,但它仍然是有用的我,所以它可能是有用的人,也许。下面是我落得这样做:

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

不简明扼要,我想,但我从来没有需要这样的事情,除了现在,这不是一般使用非常有效的,无论如何,我看到它。

25

谢谢,比茹。我用了你的解决方案,而是使用了jQuery的CSS,而不是纯JavaScript,像这样:

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

这个例子将选择其中font-family属性值包含“富利”的所有元素。

0

自定义CSS属性不可继承,因此必须直接应用到每一个元素(即使你用js动态添加的属性,则应该通过添加一个类做到这一点),所以......

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

你并不需要定义一个圆形的:在所有真正的财产。只需使用 '四舍五入' 类的存在:

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

JS

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

类似珠宝的。只是一点点的增强:

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

我想用$( '[类]')是更好的:

  • 没有必要硬编码的选择(S)
  • 将不检查所有的HTML元素一个接一个。

这是example

0

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

// 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级” 与您的选择。
  2. 用您正在查找的内容替换CSS属性和值。
  3. 将“doThingsHere()”替换为您想要在该 找到的元素上执行的操作。
相关问题