使用jquery删除多个html5数据属性
所以jquery api说如下：
从jQuery的内部.data（）缓存中删除数据不会影响文档中的任何HTML5数据属性; 使用.removeAttr（）来删除它们。
删除单个数据属性没有问题。
$('a').removeAttr('data-loremipsum'); 问题是，如何删除多个数据属性？
更多细节：
-
起点是我有多个 （比如说60）不同的数据属性，我想删除所有这些属性。
-
首选方法是仅定位包含单词
lorem数据属性。 在这种情况下，lorem始终是第一个词。 （如果算上data-则为data-） -
另外，我想保持所有其他属性不变
// 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/
在我的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/);
我也会发布回答，因为我花了一些时间从Mathiaspost制作工作版本。
我遇到的问题是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-");
您可以循环特定元素的所有数据属性并过滤子字符串的索引。
REMOVE_ATTR我使用.removeAttr（）方法，但您可以使用.removeData（）方法，具体取决于数据属性的创建方式。 根据您的需要替换或组合。
$.each($('div').data(), function (i) { var dataName = i, criteria = "lorem"; if (dataName.indexOf(criteria) >= 0) { $('div').removeAttr("data-"+dataName); } });
SET NULL您还可以选择将data-attribute设置为null，具体取决于您的业务逻辑。
$.each($('div').data(), function (i) { var dataName = i, criteria = "lorem"; if (dataName.indexOf(criteria) >= 0) { $('div').data(dataName, ""); } });
下面的Vanilla JS清除所有数据属性。 如果您想添加一些if逻辑来删除数据属性的子集，那么将该function添加到下面的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); } } }
遗憾的是，在jQuery中不可能选择以给定值开头的属性名称（对于属性值，它是可能的）。
我想出的最简单的解决方案：
$(document).ready(function(){ $('[data-loremIpsum], [data-loremDolor]').each(function(index, value) { $(this).removeAttr('data-loremIpsum') .removeAttr('data-loremDolor'); }); });
JsFiddle演示 （确保在单击运行后查找html源代码）