【发布时间】：2017-11-07 23:35:30
【问题描述】：
例如，如果我想选择其 alt 为 Home 的每个图像，我可以执行以下操作：
$("img[alt='Home']")
但是如何在单个选择器中选择其width CSS 属性为 750 像素的每个元素？
编辑：如果没有这样的选择器，是否有任何插件，或者有计划在下一个 jQuery 版本中实现它？
【问题讨论】：
【发布时间】：2017-11-07 23:35:30
【问题描述】：
不一定是个好主意，但您可以为其添加一个新的 Sizzle 选择器：
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
然后你可以像这样使用它：
$('div:width(970)')
不过，这将非常缓慢，因此您需要缩小要比较的元素数量，例如：
$('#navbar>div:width(970)')
只选择那些是导航栏的直接后代的 div，它们的宽度也为 970px。
【讨论】：
-
$.expr是 jQuery 中正确的 API 吗？我只使用了jQuery.find.selectors.filters，因为那是 Sizzle 暴露于全局范围的地方。 -
删除了我的答案，因为它或多或少地重复了你的答案。不过仍然不清楚 API。
-
啊。他们评估相同的对象，但 jQuery.find.selectors.filters 看起来不那么愚蠢。感谢您指出这一点
-
这真是太棒了，我用你的例子做了一个不透明的，太棒了。
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...
【讨论】：
-
这难道不能用一个简单的选择器吗？
-
@josh 问题仅针对 css 声明的宽度提出了具体要求
-
我的意思是是否有任何方法可以在功能上添加此功能，以便您可以这样做：img[Attribute='Value']{CSSProperty='CSSValue'}
-
我不确定我是否误读了这个问题，但我认为 OP 不想只查找图像，也不想查找具有特定 alt 属性的图像。他们说“每一个元素”。
-
@DisgruntledGoat - 我认为你是对的，我已经取消了属性过滤器。
我不知道这是否可行，但是...：
${"[style*=width: 750px]")
但是，您最好使用一个类来控制宽度，然后修改该类的所有实例的宽度...或更改为不同的类：
$(".classname").removeClass("classname").addClass("otherclassname");
【讨论】：
-
@R. Bemrose - 当我看到你的帖子时，我认为这会起作用，但我在几个场景中尝试过，但没有任何运气。我相信你可以在 Prototype 中做类似的事情，可惜你不能在 jQuery 中。
这是一个旧的，但感谢 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 中对其进行了测试。没有在别人身上测试过。我也没有花太多精力研究其他现有的库/插件。
【讨论】：
我遇到了类似的问题。最后编写了一个插件来根据计算的样式选择元素。
https://github.com/MikeCostello/query-declaration
jQuery$(":style({ width: 750px})")
【讨论】：