В jQuery есть селектор стилей?

Question

Если я хочу выбрать каждое изображение, например, Домашнее, я могу сделать что-то вроде этого:

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

Но как мне выбрать все элементы, чье CSS-свойство width равно 750px, например, в одном селекторе?

РЕДАКТИРОВАТЬ: Если такого селектора нет, есть ли плагин или планируется сделать это в следующих версиях jQuery?

Answer 1

Не обязательно отличная идея, но вы можете добавить для нее новый селектор Sizzle:

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

, который вы можете затем использовать следующим образом:

$('div:width(970)')

Однако это будет ужасно медленно, поэтому вы захотите сузить число сравниваемых элементов с чем-то вроде:

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

, чтобы выбрать только те div, которые являются прямыми потомками панели навигации, которые также имеют ширину 970 пикселей.

Answer 2

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

РЕДАКТИРОВАТЬ: Плагин, о котором я знаю, или какие-либо планы по включению таких специфических функций. Вы можете легко подключить его самостоятельно, например (непроверенный):

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

Использование:

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

Answer 3

Понятия не имею, сработает ли это, но ...:

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

Однако вам может быть лучше использовать класс для управления шириной, затем изменить ширину всех экземпляров этого класса ... или перейти на другой класс:

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

Answer 4

Это старый, но благодаря ответу Джонатана дель Стротера, это заставило меня задуматься о том, как это еще немного округлить:

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

Теперь вы можете легко запрашивать с помощью пользовательского селектора style следующим образом:

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

Во время этого ответа - должны возвращаться верхние элементы div переполнения стека (эта страница).

Примерно так будет работать:

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

Попробуйте добавить код в инструменты разработчика в вашем браузере. Я проверил это в Chrome. Не проверял это в других. Я также не слишком много работал над изучением других уже существующих библиотек / плагинов.

Answer 5

У меня была похожая проблема. Закончилось написание плагина для выбора элементов на основе их вычисленного стиля.

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

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