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

问题描述：

如何使用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

答

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

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

更新响应编辑 - group selectors：

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

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

@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

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

答

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

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属性值包含“富利”的所有元素。

答

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

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
}

HTML

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

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

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

答

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

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

我想用$（ '[类]'）是更好的：

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

这是example。

答

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

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

这个解决方案是不同的，因为它不使用角落，过滤器或回报。这是故意为更多的用户提供的。

东西来代替：

替换 “.dom级” 与您的选择。
用您正在查找的内容替换CSS属性和值。
将“doThingsHere（）”替换为您想要在该找到的元素上执行的操作。

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

相关推荐