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 s

Answer 1

This is an old one, but thanks to Jonathan del Strother's answer, it got me thinking on how to round this out a bit more:

(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);

You should now be able to easily query with the custom style selector as follows:

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

At the time of this answer - should return the top div elements of Stack Overflow (this page).

Something like this will even work:

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

Try adding the code in the developer tools in your browser. I tested it in Chrome. Haven't tested it in others. I also didn't put too much work into researching other pre-existing libraries/plugin's out there.