Is there a style selector in jQuery?

Question

If I want to select every image which it's alt is Home for example, I can do something like this:

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

But how can I select every elements which their width CSS property is 750px for example in a single selector?

EDIT: If there is no such selector, is there any plugin, or any plans to do it in the next jQuery versions?

Answer 1

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

EDIT: There is no plugin I am aware of, or any plans to include such specific functionality. You can easily pluginify it yourself, such as (untested):

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

Usage:

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

Answer 2

I have no idea if this will work, but...:

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

However, you might be better off using a class to control the width, then modifying the width of all instances of that class... or changing to a different class:

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

Answer 3

Not necessarily a great idea, but you could add a new Sizzle selector for it :

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

which you could then use like so:

$('div:width(970)')

That's going to be horrifically slow, though, so you'd want to narrow down on the number of elements you're comparing with something like :

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

to only select those divs that are direct descendants of the navbar, which also have a width of 970px.