Seleccionar todos los elementos que tienen un CSS específico, usando jQuery

Question

¿Cómo puedo seleccionar todos los elementos que tienen una propiedad CSS específica aplicada, usando jQuery? Por ejemplo:

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

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

¿Cómo seleccionar por propiedad llamada "redondeada"?

El nombre de la clase CSS es muy flexible.

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

Cómo reemplazar estas dos operaciones a una operación. Tal vez algo como esto:

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

¿Hay alguna forma mejor de hacerlo?

Answer 1

No puede (utilizando un selector de CSS) seleccionar elementos en función de las propiedades de CSS que se les han aplicado.

Si desea hacer esto manualmente, puede seleccionar todos los elementos del documento, recorrerlos y verificar el valor calculado de la propiedad que le interesa (esto probablemente solo funcionaría con propiedades CSS reales, no compuestas como rounded). También sería lento.

actualización en respuesta a las ediciones - group selectors:

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

Answer 2

Este es un hilo de dos años, pero todavía era útil para mí así que podría ser útil a los demás, tal vez. Esto es lo que terminé haciendo:

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

no tan breve como me gustaría, pero nunca he necesitado algo como esto excepto que ahora, y no es muy eficiente para el uso general de todos modos, como yo lo veo.

Answer 3

Gracias, Bijou. He utilizado su solución, sino que se utiliza el jQuery css en lugar de javascript puro, como esto:

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

Este ejemplo podría seleccionar todos los elementos en los que el valor del atributo font-family contiene "Futura".

propiedades

Answer 4

CSS personalizado no se heredan, por lo que deben ser aplicados directamente a cada elemento (incluso si se utiliza js añadir dinámicamente propiedades, debe hacerlo mediante la adición de una clase), así que ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

no es necesario definir un redondeado: verdadera propiedad en absoluto. Sólo tiene que utilizar la presencia de la clase 'redondeado':

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

JS

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

Answer 5

similares como Bijou de.Sólo un poco de mejora de bits:

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

Creo utilizando $ ('[Clase]') es mejor:

• hay necesidad de codificar el selector (s)
• no comprobará todos los elementos HTML uno por uno.

Aquí hay un example.

Answer 6

Aquí es una solución fácil de entender limpio,:

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

Esta solución es diferente, ya que no utiliza esquina, filtro o de retorno. Está hecho intencionalmente para un público más amplio de usuarios.

Cosas que reemplazan:

1. reemplazar ".dom clase" con su selector.
2. Reemplace la propiedad y el valor CSS con lo que está buscando.
3. Reemplace "doThingsHere()" con lo que desea ejecutar en ese elemento encontrado .