¿Hay un selector de estilo en jQuery?

Si quiero seleccionar cada imagen que es alt es Home por ejemplo, puedo hacer algo como esto:

$("img[alt='Home']") 

Pero, ¿cómo puedo seleccionar todos los elementos cuya propiedad CSS de width es 750px, por ejemplo, en un solo selector?

EDITAR: si no existe dicho selector, ¿hay algún complemento o algún plan para hacerlo en las próximas versiones de jQuery?

No necesariamente es una gran idea, pero podría agregarle un nuevo selector de Sizzle:

 $.expr[':'].width = function(elem, pos, match) { return $(elem).width() == parseInt(match[3]); } 

que luego podrías usar así:

 $('div:width(970)') 

Sin embargo, va a ser terriblemente lento, por lo que querrá reducir el número de elementos que está comparando con algo como:

 $('#navbar>div:width(970)') 

para seleccionar solo los divs que son descendientes directos de la barra de navegación, que también tienen un ancho de 970px.

 var $images = $("img").filter(function() { return $(this).css('width') == '750px'; }); 

EDITAR: No conozco ningún complemento, ni ningún plan para incluir dicha funcionalidad específica. Usted puede fácilmente pluginify usted mismo, como (no probado):

 $.fn.filterByWidth = function(width) { var $images = $("img").filter(function() { return $(this).css('width') == width; }); return $images; }; 

Uso:

 $images = $('#div img').filterByWidth('750px'); $images = $('#div img').filterByWidth('50%'); ...etc... 

No tengo idea si esto funcionará, pero …

 ${"[style*=width: 750px]") 

Sin embargo, es mejor que utilices una clase para controlar el ancho, luego modifiques el ancho de todas las instancias de esa clase … o cambies a una clase diferente:

 $(".classname").removeClass("classname").addClass("otherclassname"); 

Este es uno viejo, pero gracias a la respuesta de Jonathan del Strother, me hizo pensar en cómo redondear esto un poco más:

 (function($){ // Add commonly used regex to the jQuery object var regex = { digits: /^(-?\d+(?:\.\d+)?)([a-zA-Z]+)?$/ ,expr: /^([\w-]+)\s*([:=<>])\s*([\w-\.]+(?:\([^\)]+\))?)$/ }; // Create a custom jQuery function that allows a bit more useful CSS extraction $.fn.extend({ cssExtract: function(cssAttr) { var val = {prop:this.css(cssAttr)}; if (typeof val.prop === "string") { var match = regex.digits.exec(val.prop); if (match) { val.int = Number(match[1]); val.metric = match[2] || "px" } } return val; } }); // Create the custom style selector $.find.selectors[":"].style = function(el, pos, match) { var search = regex.expr.exec(match[3]); if (search) { var style = search[1] ,operator = search[2] ,val = search[3] ,target = $(el).cssExtract(style) ,compare = (function(result){ if (result) { return { int: Number(result[1]) ,metric: result[2] || "px" }; } return null; })(regex.digits.exec(val)); if ( target.metric && compare && compare.metric && target.metric === compare.metric ) { if (operator === "=" || operator === ":") { return target.int === compare.int; } else if (operator === "<") { return target.int < compare.int; } else if (operator === ">") { return target.int > compare.int; } } else if (target.prop && (operator === "=" || operator === ":")) { return target.prop === val; } } return false; }; })(jQuery); 

Ahora debería poder consultar fácilmente con el selector de style personalizado de la siguiente manera:

 $("div:style(height=57)") 

En el momento de esta respuesta, debe devolver los elementos Div principales de Desbordamiento de stack (esta página).

Algo como esto incluso funcionará:

 $("h3:style(color:rgb(106, 115, 124))") 

Intente agregar el código en las herramientas de desarrollador en su navegador. Lo probé en Chrome. No lo he probado en otros. Tampoco invertí demasiado trabajo en investigar otras bibliotecas / plugins preexistentes.

Tuve un problema similar. Terminó escribiendo un complemento para seleccionar elementos en función de su estilo calculado.

https://github.com/MikeCostello/query-declaration

jQuery
$(":style({ width: 750px})")