bỏ nhiều html5 dữ liệu thuộc tính với jquery

Question

api Vì vậy, jquery nói như sau:

trình xóa dữ liệu từ .data nội jQuery() bộ nhớ cache không ảnh hưởng đến bất kỳ HTML5 đĩa dữ liệu thuộc tính trong một tài liệu; sử dụng .removeAttr() để loại bỏ chúng.

Tôi không có vấn đề khi xóa một thuộc tính dữ liệu duy nhất.

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

---

Câu hỏi đặt ra là, làm thế nào tôi có thể loại bỏ nhiều dữ liệu thuộc tính?

Thông tin chi tiết:

1. Điểm khởi đầu là tôi có nhiều (giả sử .. 60) dữ liệu thuộc tính khác nhau và tôi muốn loại bỏ tất cả trong số họ.

2. Cách ưu tiên sẽ là chỉ nhắm mục tiêu các thuộc tính dữ liệu có chứa từ lorem. Trong trường hợp này, lorem luôn là từ đầu tiên. (Hoặc thứ hai nếu bạn đếm data-)

3. Ngoài ra tôi muốn giữ tất cả các thuộc tính khác còn nguyên vẹn

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 ở đây: http://jsfiddle.net/Gpqh5/

Answer 2

Trong my jQuery placeholder plugin, Tôi đang sử dụng sau đây để có được tất cả các thuộc tính cho một nguyên tố :

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

Lưu ý rằng elem là đối tượng phần tử chứ không phải đối tượng jQuery.

Bạn có thể dễ dàng tinh chỉnh này, để có được chỉ data-* tên thuộc tính:

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

Sau đó, bạn có thể lặp qua mảng kết quả, và gọi removeAttr() cho từng hạng mục trên phần tử.

Dưới đây là một jQuery plugin đơn giản rằng nên làm như lừa:

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

Đáng buồn là nó không phải là có thể trong jQuery để chọn tên thuộc tính mà bắt đầu với một giá trị nhất định (đối với thuộc tính giá trị đó là có thể).

Giải pháp đơn giản nhất tôi đến với:

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

JsFiddle Demo (Hãy chắc chắn để tìm kiếm mã nguồn html sau khi bạn nhấp chạy)

Answer 4

Tôi cũng sẽ đăng câu trả lời, vì nó đã cho tôi một thời gian để làm cho phiên bản làm việc từ bài Mathias.

Những vấn đề tôi đã là SVG cần thêm chăm sóc, có những sắc thái nhỏ (jQuery không thích nó), nhưng ở đây là mã mà nên làm việc cho SVG cũng như:

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

lưu ý rằng nó đang sử dụng dấu gạch dưới, nhưng bạn có thể thay thế _.each bằng $ .each tôi tin tưởng.

Cách sử dụng:

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

Bạn có thể lặp tất cả các thuộc tính dữ liệu của phần tử và bộ lọc cụ thể đối với chỉ số của một tiểu chuỗi.

REMOVE_ATTR tôi đã sử dụng phương pháp .removeAttr(), nhưng bạn có thể có thể sử dụng phương pháp .removeData() tùy thuộc vào cách dữ liệu thuộc tính đã được tạo ra. Thay thế hoặc kết hợp như bạn thấy phù hợp.

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

SET NULL Bạn cũng có thể tùy chọn thiết lập các dữ liệu thuộc tính null tùy thuộc vào logic kinh doanh của bạn.

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

Answer 6

Vanilla JS bên dưới xóa tất cả thuộc tính dữ liệu. Nếu bạn muốn thêm một số logic if để loại bỏ một tập hợp con thuộc tính dữ liệu, sẽ không quan trọng để thêm chức năng đó vào JavaScript bên dưới.

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