Селекторы атрибутов jQuery: как запросить атрибут с настраиваемым пространством имен
Предположим, у меня есть простой документ XHTML, который использует настраиваемое пространство имен для атрибутов:
<html xmlns = "..." xmlns:custom = "http://www.example.com/ns">
...
<div class = "foo" custom:attr = "bla"/>
...
</html>
Как сопоставить каждый элемент с определенным настраиваемым атрибутом с помощью jQuery? С помощью
$("div[custom:attr]")
не работает. (Пока пробовал только с Firefox.)
Предполагается, что объявление префикса пространства имен должно быть xmlns: custom =?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вам следует использовать $('div').attr('custom:attr').
Я пояснил свой вопрос: я хочу сопоставить каждый элемент с настраиваемым атрибутом, а не получать значение атрибута.
@redsquare: работает в большинстве браузеров, но не работает в Opera. Какое-нибудь быстрое решение для этого?
jQuery не поддерживает пользовательские пространства имен напрямую, но вы можете найти нужные вам div с помощью функции фильтрации.
// find all divs that have custom:attr
$('div').filter(function() { return $(this).attr('custom:attr'); }).each(function() {
// matched a div with custom::attr
$(this).html('I was found.');
});
Это работает в некоторых условиях:
$("div[custom\:attr]")
Однако для более продвинутого метода см. этот подключаемый модуль jQuery пространства имен XML
Плагин пространства имен - это мечта.
Эта стратегия не работает в браузерах на основе Webkit, таких как Safari и Chrome. Любая идея?
+1, с небольшим примечанием: jQuery будет стирать определения пространств имен добавленных фрагментов XML в HTML (на самом деле, проверено с SVG). Он изменяет атрибуты xmlns:custom = "uri" на custom = "uri", вероятно, потому, что HTML (обычно?) Не подтверждает атрибут xmlns. Использование документа в формате XHTML решает проблему, хотя не во всех случаях может быть практичным.
По моему опыту, обычно сам браузер отвечает за изменение HTML (поскольку он управляет DOM, а не jQuery). IE особенно ужасен по этому поводу (большой сюрприз).
синтаксис для сопоставления по атрибуту:
$("div[customattr=bla]") соответствует div customattr = "bla"
$("[customattr]") сопоставляет все теги с атрибутом "customattr"
с атрибутами пространства имен, такими как 'custom:attr', он не работает
Здесь можно найти хороший обзор.
В связанной статье не упоминаются настраиваемые атрибуты.
Это не ответ. По сути, это просто повторение вопроса и утверждение, что селекторы, похоже, не работают с пространствами имен.
Вот реализация настраиваемого селектора, который мне подходит.
// Custom jQuery selector to select on custom namespaced attributes
$.expr[':'].nsAttr = function(obj, index, meta, stack) {
// if the parameter isn't a string, the selector is invalid,
// so always return false.
if ( typeof meta[3] != 'string' )
return false;
// if the parameter doesn't have an '=' character in it,
// assume it is an attribute name with no value,
// and match all elements that have only that attribute name.
if ( meta[3].indexOf('=') == -1 )
{
var val = $(obj).attr(meta[3]);
return (typeof val !== 'undefined' && val !== false);
}
// if the parameter does contain an '=' character,
// we should only match elements that have an attribute
// with a matching name and value.
else
{
// split the parameter into name/value pairs
var arr = meta[3].split('=', 2);
var attrName = arr[0];
var attrValue = arr[1];
// if the current object has an attribute matching the specified
// name & value, include it in our selection.
return ( $(obj).attr(attrName) == attrValue );
}
};
Пример использования:
// Show all divs where the custom attribute matches both name and value.
$('div:nsAttr(MyNameSpace:customAttr=someValue)').show();
// Show all divs that have the custom attribute, regardless of its value.
$('div:nsAttr(MyNameSpace:customAttr)').show();
Обновление, ответ Суфи - гораздо более простой синтаксис и работает. Однако я не делал никаких сравнений производительности.