Seleccione todos los elementos que tengan un CSS específico, utilizando 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 por una operación. Tal vez algo como esto:

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

¿Hay alguna forma mejor de hacer esto?

Answer 1

No puede (usando un selector CSS) seleccionar elementos basados ??en las propiedades 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 (sin embargo, esto probablemente solo funcionaría con propiedades CSS reales, no hechas arriba, como redondeado ). También sería lento.

Actualización en respuesta a ediciones & # 8212; selectores de grupo :

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

Answer 2

Este es un hilo de dos años, pero aún así me fue útil, por lo que podría ser útil para otros, tal vez. Esto es lo que terminé haciendo:

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

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

Answer 3

Gracias, Bijou. Usé su solución, pero usé jQuery .css en lugar de javascript puro, así:

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

Este ejemplo seleccionaría todos los elementos donde el valor del atributo font-family contiene " Futura " ;.

Answer 4

Similar a Bijou's. Solo un poco de mejora:

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

Creo que usar $ ('[clase]') es mejor:

• no es necesario codificar los selectores
• no verificará todos los elementos HTML uno por uno.

Aquí hay un ejemplo .

Answer 5

Aquí hay una solución limpia y fácil de entender:

// 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 porque no usa esquina, filtro o retorno. Está hecho intencionalmente para un público más amplio de usuarios.

Cosas para reemplazar:

1. Reemplazar " .dom-class " con su selector.
2. Reemplace la propiedad y el valor de CSS con lo que está buscando.
3. Reemplazar " doThingsHere () " con lo que quieres ejecutar en eso elemento encontrado.

Answer 6

Las propiedades CSS personalizadas no se heredan, por lo que deben aplicarse directamente a cada elemento (incluso si usa js para agregar propiedades dinámicamente, debe hacerlo agregando una clase), así que ...

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

No necesita definir una propiedad redondeada: verdadera en absoluto. Simplemente use la presencia de la clase 'Redondeada':

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

JS

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