filtro de elemento jquery por css

Question

Me gustaría seleccionar cada div que tenga un color de fondo rojo, por ejemplo. ¿es esto posible en jquery?

<div style="background-color:red"></div> 
<div style="background-color:white"></div> 
<div style="background-color:red"></div> 
<div style="background-color:yellow"></div> 

agradecimiento

Answer 1

$('div[style=background-color:red]'); 

Answer 2

Se puede usar el filtro de jQuery:

$('div').filter(function() { 
    return this.element.style['background-color'] == 'red'; 
}); 

Pero, como tvanfosson ha dicho, la forma correcta sería la de asignar una clase de CSS para cada una de sus divs, entonces podría llamar a los objetos usando jQuery de esta manera (que es la forma preferida de trabajar con jQuery):

$('.yourCSSClass'); 

Answer 3

Creo que se necesita un filtro personalizado para que si usted no quiere depender de un determinado atributo style=xxx sobre la etiqueta:

$('*').filter(function() { /* check the background color of this */ }); 

Answer 4

Por qué hacerlo de la manera más dura? Una mejor solución es usar clases CSS para darles a tus elementos sus estilos, luego simplemente puedes usar el selector basado en clases.

<style type="text/css"> 
    .alert { 
     background-color: red; 
    } 
</style> 

<div class="alert"></div> 


$('.alert').... 

Answer 5

En primer lugar, nunca recomiendo establecer estilos en línea en elementos de la página. Asigne clases CSS y controle los colores de fondo en un documento CSS externo.

<div class="red"></div> 
<div class="white"></div> 
<div class="red"></div> 
<div class="yellow"></div> 

Y en tu CSS:

.red {background-color:red;} 
.white {background-color:white;} 
.yellow {background-color:yellow;} 

Entonces se hace que sea fácil para seleccionar los rojos mediante el uso de: $('div.red')

Answer 6

Este código también funciona para CSS que es no define en el atributo de estilo de la etiqueta:

$('div').filter(function() { 
    return $(this).css('background-color') == 'red'; 
});