Найти HTML на основе частичного атрибута
Есть ли способ с javascript (особенно jQuery), чтобы найти элемент, основанный на имени частичного атрибута?
Я не ищу ни одного из селекторов, которые находят частичные значения атрибутов, как указано в этих ссылках:
но больше что-то вроде строк
<div data-api-src="some value"></div>
<div data-api-myattr="foobar"></div>
и
$("[^data-api]").doSomething()
чтобы найти любой элемент, который имеет атрибут, начинающийся с "data-api".
Ответы
Ответ 1
Не уверен, что вы ищете, но просто потратил несколько минут на это:
$.fn.filterData = function(set) {
var elems=$([]);
this.each(function(i,e) {
$.each( $(e).data(), function(j,f) {
if (j.substring(0, set.length) == set) {
elems = elems.add($(e));
}
});
});
return elems;
}
Используется как:
$('div').filterData('api').css('color', 'red');
И будет соответствовать любым элементам с атрибутом данных, например data-api-*
, и вы можете расширять и изменять его, чтобы включить больше параметров и т.д., но прямо сейчас он ищет только атрибуты данных и только соответствует "начинается с", но по крайней мере, он прост в использовании?
FIDDLE
Ответ 2
Это использует .filter()
, чтобы ограничить кандидатов теми, у кого есть атрибуты data-api-*
. Вероятно, это не самый эффективный подход, но можно использовать, если вы можете сузить поиск с помощью соответствующего селектора.
$("div").filter(function() {
var attrs = this.attributes;
for (var i = 0; i < attrs.length; i++) {
if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;
};
return false;
}).css('color', 'red');
Демо: http://jsfiddle.net/r3yPZ/2/
Это также можно записать в виде селектора. Здесь моя начинающая попытка:
$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) {
for (var i = 0; i < obj.attributes.length; i++) {
if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true;
};
return false;
};
Использование:
$('div:hasAttrWithPrefix(data-api-)').css('color', 'red');
Демо: http://jsfiddle.net/SuSpe/3/
Этот селектор должен работать для версий jQuery до 1.8. Для 1.8 и выше могут потребоваться некоторые изменения. Вот попытка 1,8-совместимой версии:
$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) {
return function(obj) {
for (var i = 0; i < obj.attributes.length; i++) {
if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true;
};
return false;
};
});
Демо: http://jsfiddle.net/SuSpe/2/
Для более общего решения, здесь селектор, который принимает шаблон регулярного выражения и выбирает элементы с атрибутами, которые соответствуют этому шаблону:
$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) {
var re = new RegExp(regex);
return function(obj) {
var attrs = obj.attributes
for (var i = 0; i < attrs.length; i++) {
if (re.test(attrs[i].nodeName)) return true;
};
return false;
};
});
Для вашего примера должно работать что-то вроде этого:
$('div:hasAttr(^data-api-.+$)').css('color', 'red');
Демо: http://jsfiddle.net/Jg5qH/1/