jQuery के साथ कई एचटीएमएल 5 डेटा गुण निकालें

Question

तो jQuery एपीआई निम्नलिखित कहते हैं:

jQuery के आंतरिक .data से डेटा को निकालने में() कैश किसी भी एचटीएमएल 5 डेटा- एक दस्तावेज़ में विशेषताओं को प्रभावित नहीं करता; उनको हटाने के लिए .removeAttr() का उपयोग करें।

मुझे एक डेटा-विशेषता को हटाने में कोई समस्या नहीं है।

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

---

सवाल यह है कि, मैं कैसे एक से अधिक डेटा-विशेषताओं को दूर कर सकते हैं?

अधिक विवरण:

1. प्रारंभिक बिंदु है कि मैं कई (मान लें .. 60) अलग डेटा-गुण है और मैं उन सभी को दूर करने के लिए चाहते हैं।

2. पसंदीदा तरीका केवल उन डेटा-विशेषताओं को लक्षित करना होगा जिनमें lorem शब्द शामिल है। इस मामले में lorem हमेशा पहला शब्द है। (या दूसरा अगर आप data- गिनती)

3. इसके अलावा, मैं, मैं एक दिया तत्व के लिए सभी विशेषताओं प्राप्त करने के लिए निम्नलिखित का उपयोग कर रहा my jQuery placeholder plugin में अन्य सभी गुण बरकरार

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

फिडल यहाँ: http://jsfiddle.net/Gpqh5/

Answer 2

रखना चाहते हैं :

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 वस्तु है।

आप आसानी से इस tweak सकता है, केवल 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()।

$.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

दुर्भाग्य से यह संभव नहीं jQuery में है कि किसी भी मूल्य के साथ शुरू होता है (विशेषता मानों के लिए यह संभव है) विशेषता नाम का चयन करने के लिए है:

यहाँ है कि चाल करना चाहिए एक सरल jQuery प्लगइन है।

सबसे आसान समाधान मैं के साथ आया था:

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

JsFiddle Demo (आप रन क्लिक किया, HTML स्रोत कोड को देखने के लिए सुनिश्चित करें)

Answer 4

मैं जवाब भी पोस्ट करूंगा, क्योंकि मुझे माथीस पोस्ट से वर्किंग वर्जन बनाने में कुछ समय लगा।

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

ध्यान दें:

समस्याओं मैं था कि एसवीजी अतिरिक्त देखभाल की जरूरत है, थोड़ा बारीकियों (jQuery इसे पसंद नहीं करता है) देखते हैं, लेकिन यहाँ कोड है कि एसवीजी के लिए भी काम करना चाहिए था कि यह अंडरस्कोर का उपयोग कर रहा है, लेकिन आप $.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-"); 

Answer 5

आप पाश कर सकते हैं एक उप-स्ट्रिंग के सूचकांक के लिए विशिष्ट तत्व और फिल्टर का डेटा विशेषताओं के सभी।

REMOVE_ATTR मैं .removeAttr() विधि का इस्तेमाल किया है, लेकिन आप कैसे डेटा-विशेषता बनाया गया था पर निर्भर करता है .removeData() विधि का उपयोग करने में सक्षम हो सकता है। फिट बैठते समय गठबंधन या गठबंधन करें।

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

सेट शून्य या फिर आप डेटा-विशेषता अपने व्यापार तर्क के आधार पर शून्य पर सेट कर सकते हैं। नीचे

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

Answer 6

वेनिला जे एस सभी डेटा गुण साफ करता है। यदि आप डेटा विशेषताओं का सबसेट हटाने के लिए कुछ if तर्क जोड़ना चाहते हैं, तो नीचे दी गई जावास्क्रिप्ट को उस कार्यक्षमता को जोड़ने के लिए यह छोटा होना चाहिए।

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