如果我想选择每个alt为Home的图像,我可以这样做:
$("img[alt='Home']")
但是我该如何选择每个宽度为750像素的元素,例如在单个选择器中选择?
编辑:如果没有这样的选择器,是否有任何插件或计划在下一个jQuery版本中实现它?
并不一定是个好主意,但你可以添加一个新的 Sizzle 选择器来实现:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
你随后可以像这样使用它:
$('div:width(970)')
不过那样会非常慢,所以你需要通过类似这样的方式缩小要比较的元素数量:
$('#navbar>div:width(970)')
仅选择那些宽度为970像素的navbar直接子级的div。
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...
我不知道这是否有效,但是……
${"[style*=width: 750px]")
然而,您最好使用类来控制宽度,然后修改该类的所有实例的宽度... 或更改为不同的类:
$(".classname").removeClass("classname").addClass("otherclassname");
这是一个老问题,但多亏了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})")
jQuery
$(":style({ width: 750px})")