Если я хочу выбрать каждое изображение, которое он alt является Домашним, например, я могу сделать что-то вроде этого:
$("img[alt='Home']")
Но как я могу выбрать все элементы, для которых их свойство width CSS составляет 750 пикселей, например, в одном селекторе?
EDIT: Если такого селектора нет, есть ли какой-либо плагин или какие-либо планы сделать это в следующих версиях jQuery?
Не обязательно отличная идея, но вы можете добавить для нее новый селектор Sizzle:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
который вы могли бы использовать так:
$('div:width(970)')
Это будет ужасно медленным, так что вы хотите сузить количество элементов, которые вы сравниваете с чем-то вроде:
$('#navbar>div:width(970)')
чтобы выбрать только те div, которые являются прямыми потомками navbar, которые также имеют ширину 970px.
var $images = $("img").filter(function() {
return $(this).css('width') == '750px';
});
EDIT: плагина, о котором я знаю, или каких-либо планов включить такие конкретные функции. Вы можете легко подключить его самостоятельно, например (untested):
$.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");
Это старый, но благодаря ответу Джонатана дель Стротера, он заставил меня задуматься о том, как это сделать еще немного:
(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 из Qaru (эта страница).
Что-то вроде этого будет работать:
$("h3:style(color:rgb(106, 115, 124))")
Попробуйте добавить код в инструменты разработчика в своем браузере. Я тестировал его в Chrome. Не проверял его в других. Я также не уделял слишком много внимания исследованию других ранее существовавших библиотек/плагинов там.
У меня была аналогичная проблема. Закончилось создание плагина для выбора элементов на основе их вычисленного стиля.
https://github.com/MikeCostello/query-declaration
JQuery $(":style({ width: 750px})")