Question

我正在尝试找到一种从页面中删除所有匹配数据属性的方法。

我现在循环一个数组，但名字列表是为了那么长，我希望有一个更好的方法来删除我的自定义数据属性.....用正则表达式模式？

//代码

var dataArr  = ['data-myplugin-value',
                'data-myplugin-id',
                 ...
                 ...
                 ...
                 ...
                'data-myplugin-name'];

$.each(dataArr, function(i,a){
   $('['+a+']').removeAttr(a);  
});

Answer 1

如果你不介意使用XPath，这是我的解决方案：

function removeMyDataAttributes() {
    var list, iterator, attribute, i, n;

    // Select all attribute nodes that it's name starts with "data-myplugin-"
    iterator = document.evaluate('//*/attribute::*[starts-with(local-name(), "data-myplugin-")]', 
                    document.documentElement, null, XPathResult.ANY_TYPE, null);
    list = [];
    while ((attribute = iterator.iterateNext())) {
        list.push(attribute);
        // Note: can't call removeAttributeNode here: 
        // InvalidStateError: Failed to execute 'iterateNext' on 'XPathResult': The document has mutated since the result was returned.
    }
    for (i = 0, n = list.length; i < n; ++i) {
        attribute = list[ i ];
        attribute.ownerElement.removeAttributeNode(attribute);
    }
}

Answer 2

如果元素共享一个共同的父级，那么您可以将搜索范围缩小到这个元素：

var holder = $('#containerid');
$.each(dataArr, function(i,a){
    $('['+a+']', holder).removeAttr(a);  
});

此SO topic使用attributes集合中有一些代码，但我不相信它会更有效率。

Answer 3

你认为你上面写的内容会起作用吗？您将dataArr视为DOM元素，这是错误的。 Jquery无法找到

$（ '[' + A + ']'）removeAttr（a）中。

因为'a'不是指元素。

现在，关于如何解决它 - 我需要一个帮助 - 这些数据属性是从jquery还是部分html 5.如果它通过jquery，那么你可以使用

http://api.jquery.com/jquery.removedata/.

它会起作用。因此迭代所有DOM元素并调用removeData（）。不是最好的解决方案，但会起作用。

Answer 4

Loop through the array and remove all data attributes  
$.each(dataArr, function(i,a){
   removeDataAttributes('[+a+]');  
});

// removes all data attributes from a target element
// example:  removeDataAttributes('#user-list');
function removeDataAttributes(target) {

    var i,
        $target = $(target),
        attrName,
        dataAttrsToDelete = [],
        dataAttrs = $target.get(0).attributes,
        dataAttrsLen = dataAttrs.length;

    // loop through attributes and make a list of those
    // that begin with 'data-'
    for (i=0; i<dataAttrsLen; i++) {
        if ( 'data-' === dataAttrs[i].name.substring(0,5) ) {
            // Why don't you just delete the attributes here?
            // Deleting an attribute changes the indices of the
            // others wreaking havoc on the loop we are inside
            // b/c dataAttrs is a NamedNodeMap (not an array or obj)
            dataAttrsToDelete.push(dataAttrs[i].name);
        }
    }
    // delete each of the attributes we found above
    // i.e. those that start with "data-"
    $.each( dataAttrsToDelete, function( index, attrName ) {
        $target.removeAttr( attrName );
    })
};

选择并删除所有匹配的数据属性

4 个答案: