Удалите несколько атрибутов данных html5 с помощью jquery
Итак, jquery api говорит следующее:
Удаление данных из внутреннего кеша .Data() jQuery не влияет на атрибуты данных HTML5 в документе; используйте .removeAttr(), чтобы удалить их.
У меня нет проблем с удалением одного атрибута данных.
<a title="title" data-loremIpsum="Ipsum" data-loremDolor="Dolor"></a>
$('a').removeAttr('data-loremipsum');
Вопрос в том, как удалить несколько атрибутов данных?
Подробнее:
-
Отправной точкой является то, что у меня есть несколько (скажем, 60)
разные атрибуты данных, и я хочу удалить их все.
-
Предпочтительным способом было бы нацелить только те атрибуты данных, которые содержат слово lorem
. В этом случае lorem
всегда является первым словом. (или второй, если вы считаете data-
)
-
Также я хотел бы сохранить все остальные атрибуты без изменений
Ответы
Ответ 1
// Fetch an array of all the data
var data = $("a").data(),
i;
// Fetch all the key-names
var keys = $.map(data , function(value, key) { return key; });
// Loop through the keys, remove the attribute if the key contains "lorem".
for(i = 0; i < keys.length; i++) {
if (keys[i].indexOf('lorem') != -1) {
$("a").removeAttr("data-" + keys[i]);
}
}
Заклинание здесь: http://jsfiddle.net/Gpqh5/
Ответ 2
В мой плагин-заполнитель jQuery, я использую следующее, чтобы получить все атрибуты для данного элемента:
function args(elem) {
// Return an object of element attributes
var newAttrs = {},
rinlinejQuery = /^jQuery\d+$/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
Обратите внимание, что elem
- это объект-элемент, а не объект jQuery.
Вы можете легко настроить это, чтобы получить только имена атрибутов data-*
:
function getDataAttributeNames(elem) {
var names = [],
rDataAttr = /^data-/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && rDataAttr.test(attr.name)) {
names.push(attr.name);
}
});
return names;
}
Затем вы можете перебрать полученный массив и вызвать removeAttr()
для каждого элемента элемента.
Вот простой плагин jQuery, который должен сделать трюк:
$.fn.removeAttrs = function(regex) {
return this.each(function() {
var $this = $(this),
names = [];
$.each(this.attributes, function(i, attr) {
if (attr.specified && regex.test(attr.name)) {
$this.removeAttr(attr.name);
}
});
});
};
// remove all data-* attributes
$('#my-element').removeAttrs(/^data-/);
// remove all data-lorem* attributes
$('#my-element').removeAttrs(/^data-lorem/);
Ответ 3
Я также отправлю ответ, так как мне потребовалось некоторое время, чтобы сделать рабочую версию из сообщения Mathias.
Проблемы, которые у меня были, это то, что SVG нуждается в дополнительном уходе, мало нюансов (jQuery ему не нравится), но вот код, который должен работать и для SVG:
$.fn.removeAttrs = function(attrToRemove, attrValue) {
return this.each(function() {
var $this = $(this)[0];
var toBeRemoved = [];
_.each($this.attributes, function (attr) {
if (attr && attr.name.indexOf(attrToRemove) >= 0) {
if (attrValue && attr.value !== attrValue)
return;
toBeRemoved.push(attr.name);
}
});
_.each(toBeRemoved, function(attrName) {
$this.removeAttribute(attrName);
});
});
};
Обратите внимание, что он использует подчеркивание, но вы можете заменить _.each на $.each, я считаю.
Использование:
svgMapClone
.find('*')
.addBack()
.removeAttrs('svg-')
.removeAttrs('context-')
.removeAttrs('class', '')
.removeAttrs('data-target')
.removeAttrs('dynamic-cursor')
.removeAttrs('transform', 'matrix(1, 0, 0, 1, 0, 0)')
.removeAttrs("ng-");
Ответ 4
Вы можете закодировать все атрибуты данных определенного элемента и фильтровать для индекса подстроки.
REMOVE_ATTR
Я использовал метод . RemoveAttr(), но вы можете использовать .removeData() в зависимости от того, как был создан атрибут data. Замените или объедините, как вы сочтете нужным.
$.each($('div').data(), function (i) {
var dataName = i, criteria = "lorem";
if (dataName.indexOf(criteria) >= 0) {
$('div').removeAttr("data-"+dataName);
}
});
SET NULL
Вы также можете установить атрибут data в null в зависимости от вашей бизнес-логики.
$.each($('div').data(), function (i) {
var dataName = i, criteria = "lorem";
if (dataName.indexOf(criteria) >= 0) {
$('div').data(dataName, "");
}
});
Ответ 5
Vanilla JS ниже очищает все атрибуты данных. Если вы хотите добавить некоторую логику if
для удаления подмножества атрибутов данных, должно быть тривиально добавить эту функциональность к приведенному ниже JavaScript.
function clearDataAttributes(el){
if (el.hasAttributes()) {
var attrs = el.attributes;
var thisAttributeString = "";
for(var i = attrs.length - 1; i >= 0; i--) {
thisAttributeString = attrs[i].name + "-" + attrs[i].value;
el.removeAttribute(thisAttributeString);
}
}
}
Ответ 6
К сожалению, в jQuery невозможно выбрать имена атрибутов, начинающиеся с заданного значения (для значений атрибутов это возможно).
Самое простое решение, с которым я столкнулся:
$(document).ready(function(){
$('[data-loremIpsum], [data-loremDolor]').each(function(index, value) {
$(this).removeAttr('data-loremIpsum')
.removeAttr('data-loremDolor');
});
});
JsFiddle Demo (убедитесь, что вы искали исходный код html после нажатия кнопки прогона)