Question

我有一个div，其中动态数据属性被添加到某些标签上。（数据名称 - 由脚本动态生成的属性，因此我的脚本无法知道数据属性的名称）

<div data-1223="some data" data-209329="some data" data-dog="some value"> </div>

现在，我想编写一个代码，通过删除所有数据属性及其值来重置div。

我可以用

$('div').attr('data-209329',"")

但问题是我不知道将要添加的data-attribute的名称。将要添加的数据属性是动态的，我无法控制它。

删除div并重新插入div不是一个选项。请帮忙。提前谢谢

Answer 1

你可以这样使用

var data = $("div").data();

var keys = $.map(data, function (value, key) {
    return key;
});
for (i = 0; i < keys.length; i++) {
    $("div").removeAttr("data-" + keys[i]);
}

Fiddle

修改

@Mottie建议

$.each($('div').data(), function (i) { $("div").removeAttr("data-" + i); });

Demo

Answer 2

您可以使用此代码：

var data = $('div').data();

for(var i in data){
    //for change 
    $('div').attr("data-"+i,"something");
    //for remove
    $("div").removeAttr("data-" + i);
}

$('div').data();准备var data变量中所有数据属性的列表。然后你可以使用它。这是fiddle of this solution。

<强>更新由@Mottie建议

 $.each($('div').data(), function (i) {
        //for change 
        $('div').attr("data-"+i,"something");
        //for remove
        $("div").removeAttr("data-" + i);
    });

Answer 3

我认为removeData()函数就是你在这里寻找的。这将删除元素上存储的所有data信息。

.removeData（）方法允许我们删除先前使用.data（）设置的值。当使用键的名称调用时，.removeData（）将删除该特定值; 在没有参数的情况下调用时，将删除所有值。从jQuery的内部.data（）缓存中删除数据不会影响文档中的任何HTML5数据属性。使用.removeAttr（）删除它们。

但是它不会从元素中删除实际属性。要删除实际属性，您需要提取现有属性的列表。您可以通过检查元素的data()函数（在运行removeData之前）来执行此操作。

data()函数将返回key => value对的对象，然后您可以使用removeAttr()从元素中删除实际属性。

删除元素的所有动态“数据属性”

3 个答案: