¿Hay un selector de estilo en jQuery?

Question

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

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

Pero, ¿cómo puedo seleccionar cada elementos que su width propiedad CSS es 750px por ejemplo, en una sola ¿selector?

EDIT: Si no hay tal selector, ¿hay algún complemento o planes para hacerlo en las próximas versiones de jQuery?

Answer 1

No

necesariamente una gran idea, pero habría que agregar un nuevo selector de chisporroteo para ello:

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

que luego se podría utilizar de este modo:

$('div:width(970)') 

Eso va a ser terriblemente lento , sin embargo, por lo que querría restringir la cantidad 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.

Answer 2

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

EDITAR: No tengo conocimiento de ningún plugin, ni tengo planes de incluir tal funcionalidad específica. Puede pluginify fácilmente por sí mismo, como por ejemplo (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... 

Answer 3

tengo ni idea de si esto va a funcionar, pero ...:

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

Sin embargo, puede ser mejor utilizar una clase para controlar el ancho, luego modificar el ancho de todas las instancias de esa clase ... o cambiar a una clase diferente:

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

Answer 4

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})")

Answer 5

Este es un 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 personalizado style de la siguiente manera:

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

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

Algo como esto va a trabajar incluso:

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

Trate de añadir el código en las herramientas de desarrollo en su navegador. Lo probé en Chrome. No lo he probado en otros. Tampoco invertí demasiado trabajo en investigar otras bibliotecas/plugins preexistentes.