在jQuery中是否有样式选择器？

Question

在jQuery中是否有样式选择器？

15

如果我想选择每个alt为Home的图像，我可以这样做：

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

但是我该如何选择每个宽度为750像素的元素，例如在单个选择器中选择？

编辑：如果没有这样的选择器，是否有任何插件或计划在下一个jQuery版本中实现它？

- Alon Gubkin

5个回答

15

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...

- karim79

1

这难道不可以用一个简单的选择器实现吗？ - Alon Gubkin

3

@josh 这个问题明确要求只考虑 CSS 声明的宽度。 - cobbal

我的意思是是否有任何方法可以添加此功能，以便您可以执行：img[Attribute='Value']{CSSProperty='CSSValue'} - Alon Gubkin

我不确定是否误读了问题，但我认为 OP 不仅想要找到图像，也不是带有特定 alt 属性的图像。他们说“每个元素”。 - DisgruntledGoat

@DisgruntledGoat - 我认为你是对的，我已经移除了属性过滤器。 - karim79

5

我不知道这是否有效，但是……

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

然而，您最好使用类来控制宽度，然后修改该类的所有实例的宽度... 或更改为不同的类：

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

- Powerlord

@R. Bemrose - 当我看到你的帖子时，我以为那会起作用，但我在几种情况下尝试了一下，完全没有运气。我相信你可以在Prototype中做类似的事情，很遗憾你不能在jQuery中这样做。 - karim79

1

这是一个老问题，但多亏了Jonathan del Strother的答案，让我思考如何更加完善:

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

在回答时 - 应该返回 Stack Overflow（本页面）的顶部 div 元素。

类似这样的内容甚至都可以工作：

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

尝试在您的浏览器开发工具中添加代码。我在Chrome中进行了测试。尚未在其他浏览器中进行测试。我也没有花太多时间研究其他现有的库/插件。

- Erutan409

0

我曾经遇到过类似的问题。最终编写了一个插件，根据元素的计算样式来选择它们。

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

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

- Mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan del Strother · Accepted Answer

并不一定是个好主意，但你可以添加一个新的 Sizzle 选择器来实现：

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

你随后可以像这样使用它：

$('div:width(970)')

不过那样会非常慢，所以你需要通过类似这样的方式缩小要比较的元素数量：

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

仅选择那些宽度为970像素的navbar直接子级的div。