jQuery中有样式选择器吗?
例如,如果我想选择alt为Home的每个图像,我可以执行以下操作:jQuery中有样式选择器吗?,jquery,html,css,Jquery,Html,Css,例如,如果我想选择alt为Home的每个图像,我可以执行以下操作: $("img[alt='Home']") 但是,如何在单个选择器中选择其widthCSS属性为750px的每个元素呢 编辑:如果没有这样的选择器,是否有插件,或者有计划在下一个jQuery版本中使用它 var $images = $("img").filter(function() { return $(this).css('width') == '750px'; }); 编辑:我不知道有什么插件,也没有任何计划包含
$("img[alt='Home']")
但是,如何在单个选择器中选择其width
CSS属性为750px的每个元素呢
编辑:如果没有这样的选择器,是否有插件,或者有计划在下一个jQuery版本中使用它
var $images = $("img").filter(function() {
return $(this).css('width') == '750px';
});
编辑:我不知道有什么插件,也没有任何计划包含这样的特定功能。您可以自己轻松地对其进行插件,例如(未经测试):
用法:
$images = $('#div img').filterByWidth('750px');
$images = $('#div img').filterByWidth('50%');
...etc...
我不知道这是否有效,但是…:
${"[style*=width: 750px]")
但是,您最好使用一个类来控制宽度,然后修改该类的所有实例的宽度。。。或更改为其他类别:
$(".classname").removeClass("classname").addClass("otherclassname");
这不一定是个好主意,但您可以为它添加一个新的Sizzle选择器:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
您可以这样使用:
$('div:width(970)')
但是,这将非常缓慢,因此您希望缩小与以下内容进行比较的元素数量:
$('#navbar>div:width(970)')
只选择那些navbar的直接后代,它们的宽度也为970px。我也有类似的问题。最后编写了一个插件,根据元素的计算样式选择元素 jQuery
$(“:style({width:750px})”
这是一个旧版本,但多亏了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);
在回答此问题时-应返回堆栈溢出的顶部div元素(此页)
像这样的东西甚至会起作用:
$("h3:style(color:rgb(106, 115, 124))")
尝试在浏览器的开发人员工具中添加代码。我用铬做了测试。还没有在别人身上测试过。我也没有花太多的精力去研究其他已经存在的库/插件。用一个简单的选择器是不是就可以做到这一点?@josh-question专门询问css声明的宽度我的意思是,是否有任何方法可以在功能上添加它,这样你就可以做到:img[Attribute='Value']{cssprroperty='CSSValue'}我不确定我是否误读了这个问题,但我不认为OP只想查找图像,也不想查找具有特定alt属性的图像。他们说“每一个元素”。@DistangludgeOAT-我想你是对的,我已经拿走了属性过滤器。@R.Bemrose-当我看到你的帖子时,我认为这会起作用,但我在几个场景中尝试了它,但一点运气都没有。我相信您可以在原型中做类似的事情,但在jQuery中做不到这一点太糟糕了。
$.expr
是jQuery中正确的API吗?我刚刚使用了jQuery.find.selectors.filters
,因为Sizzle就是在这里暴露于全局范围的。删除了我的答案,因为它或多或少重复了你的答案。不过API还不清楚。啊。它们对同一个对象求值,但是jQuery.find.selectors.filters看起来就不那么愚蠢了。谢谢你指出这真是太棒了,我用你的例子为不透明做了一个,太棒了。
$("div:style(height=57)")
$("h3:style(color:rgb(106, 115, 124))")