Usuń wiele HTML5 atrybuty danych z jquery

Question

Więc jquery api mówi co następuje:

Usuwanie danych z wewnętrznej .data jQuery (cache) nie dokonuje żadnych atrybutów HTML5 teleinformatyczny w dokumencie; użyj .removeAttr(), aby je usunąć.

Nie mam problemu z usunięciem pojedynczego atrybutu danych.

<a title="title" data-loremIpsum="Ipsum" data-loremDolor="Dolor"></a> 
$('a').removeAttr('data-loremipsum'); 

---

pytanie brzmi, jak mogę usunąć wiele danych atrybuty?

Więcej szczegółów:

1. Punktem wyjścia jest, że mam wielokrotność (powiedzmy .. 60) różne atrybuty danych i chcę usunąć wszystkie z nich.

2. Preferowanym sposobem byłoby kierowanie tylko tych atrybutów danych, które zawierają słowo lorem. W tym przypadku lorem jest zawsze pierwszym słowem. (Lub drugi jeśli liczyć data-)

3. Również chciałbym, aby wszystkie inne atrybuty nienaruszone

Answer 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]); 
    } 
} 

Fiddle tutaj: http://jsfiddle.net/Gpqh5/

Answer 2

W my jQuery placeholder plugin używam następujących czynności, aby uzyskać wszystkie atrybuty dla danego elementu :

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; 
} 

Zauważ, że elem jest obiektem elementem, a nie obiekt jQuery.

Można łatwo dostosować to, aby tylko dostać data-* nazw atrybutów:

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; 
} 

Mogłeś wtedy pętla nad wynikającą tablicy i zadzwonić removeAttr() dla każdej pozycji na elemencie.

Oto prosty jQuery plugin, który powinien załatwić sprawę:

$.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/); 

Answer 3

Niestety nie jest to możliwe w jQuery aby wybrać nazwy atrybutów, które zaczyna się od podanej wartości (dla wartości atrybutu jest to możliwe).

Najprostszym rozwiązaniem wymyśliłem:

$(document).ready(function(){ 
    $('[data-loremIpsum], [data-loremDolor]').each(function(index, value) { 
     $(this).removeAttr('data-loremIpsum') 
       .removeAttr('data-loremDolor'); 
    }); 
}); 

JsFiddle Demo (Upewnij się, aby sprawdzić kod źródłowy html po kliknięciu run)

Answer 4

Napiszę też odpowiedź, ponieważ zajęło mi trochę czasu, aby stworzyć roboczą wersję z posta Mathiasa.

Problemy było to, że SVG potrzebuje dodatkowego zdrowotnej, są tam małe niuanse (jQuery nie podoba), ale tutaj jest kod, który powinien pracować dla SVG, a także:

$.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); 
     }); 
    }); 
}; 

uwaga że używa on podkreślenia, ale można zastąpić _.each z $ .each, jak sądzę.

Zastosowanie:

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-"); 

Answer 5

Można pętla wszystkich atrybutów danych z określonego elementu i filtrem do wskaźnika sub-string.

REMOVE_ATTR użyłem metody .removeAttr(), ale może móc użyć metody .removeData() zależności od sposobu danych atrybut został stworzony. Zastąp lub zmiksuj według własnego uznania.

$.each($('div').data(), function (i) { 
     var dataName = i, criteria = "lorem"; 
     if (dataName.indexOf(criteria) >= 0) { 
      $('div').removeAttr("data-"+dataName); 
     } 
}); 

SET NULL Można też ewentualnie ustawić dane atrybutu na null w zależności od logiki biznesowej.

$.each($('div').data(), function (i) { 
    var dataName = i, criteria = "lorem"; 
    if (dataName.indexOf(criteria) >= 0) { 
     $('div').data(dataName, ""); 
    } 
}); 

Answer 6

Vanilla JS poniżej ściąga wszystkie atrybuty danych. Jeśli chcesz dodać pewną logikę if, aby usunąć podzbiór atrybutów danych, dodanie tej funkcji do poniższego skryptu JavaScript powinno być trywialne.

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); 
     } 
    } 
}