更改数据-未知属性值
我有带有3个div的页面，例如，每个div有2个数据属性。
<div class="div1" data-10="some value" data-30="some value"></div>我可以通过此方法更改数据属性值。
$('.div1').attr('data-30', 'some changed values'); 但问题是数据属性的第二部分是未知的(数据-未知数字)。
我不知道这个符号"-“后面的数字，它可能是30,40,50 or what ever，所以我如何选择要更改它的值的数据属性？
我只想更改第二个数据-属性，我不关心第一个
我该怎么做呢？
提前大谢
回答 2
Stack Overflow用户
发布于 2015-08-16 13:25:18
编辑，更新
仍然不会更改数据-attr的值。
jQuery .data()不更改data-*属性，请参见jQuery's .data() doesn't append attribute to DOMElement，jQuery Data vs Attr?。
尝试使用HTMLElement.dataset (ie11)来设置实际的html dataset，例如，
elem[0].dataset[key] = "margin-top:100px";只想更改第二个数据-属性，我不关心第一个
尝试利用.data()，$.map()
var index = 0, elem = $(".div1");
$.map(elem.data(), function(value, key) {
++index;
// if `index` is `2`
if (index === 2) {
// do stuff with second `data-*` attribute
// change the value of that data-attribute
// for example to `margin-top:100px`
elem.data(key, "margin-top:100px");
// still doesn't change the value of the data-attr
elem[0].dataset[key] = "margin-top:100px";
}
});
console.log(elem.data(), elem[0].dataset["30"]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1" data-10="some value" data-30="some value"></div>
Stack Overflow用户
发布于 2015-08-16 13:11:42
首先，我必须同意Vohuman的观点:我不会这么做，我会把名字改成一致的。我不明白为什么要这样做才能使其响应，因为您不仅可以在CSS中使用属性，还可以使用它们的值，例如：
[data-width="100"] {
/* Rules here */
}但回答你实际问的问题：
有两种选择：
使用DOM
DOM提供了一个 property，用于获取元素上的所有属性：
var attrs = $(".div1")[0].attributes; // [0] = Get the raw element(显然，如果您需要对所有匹配的元素执行此操作，请使用循环和索引，而不是直接使用0 )。
它是一个可以循环通过的NamedNodeMap：
var i, attr;
for (i = 0; i < attrs.length; ++i) {
attr = attrs[i];
if (/^data-\d+$/.test(attr.nodeName)) { // regex matches `data-nnn` where
// nnn is a number of any number of digits
// This is the attribute, change it
attr.nodeValue = theNewValue;
break;
}
}实况示例：
var attrs = $(".div1")[0].attributes; // [0] = Get the raw element
var i, attr;
for (i = 0; i < attrs.length; ++i) {
attr = attrs[i];
if (/^data-\d+$/.test(attr.nodeName)) { // regex matches `data-nnn` where
// nnn is a number of any number of digits
// This is the attribute, change it
snippet.log("The attribute was: " + attr.nodeName);
attr.nodeValue = "the new value";
break;
}
}<div class="div1" data-10="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
如果您在您的环境中使用ES5方法(您不需要支持非常老的浏览器，也不必为它们使用shim )，我们可以使它更加简洁，但可能不太清楚：
Array.prototype.some.call($(".div1")[0].attributes, function(attr) {
if (/^data-\d+$/.test(attr.nodeName)) { // regex matches `data-nnn` where
// nnn is a number of any number of digits
// This is the attribute, change it
snippet.log("The attribute was: " + attr.nodeName);
attr.nodeValue = "the new value";
return true;
}
});
Array.prototype.some.call($(".div1")[0].attributes, function(attr) {
if (/^data-\d+$/.test(attr.nodeName)) { // regex matches `data-nnn` where
// nnn is a number of any number of digits
// This is the attribute, change it
snippet.log("The attribute was: " + attr.nodeName);
attr.nodeValue = "the new value";
return true;
}
});<div class="div1" data-10="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
使用jQuery的data确定名称，然后使用attr更改名称
注:这是低效的。
jQuery的data方法将返回一个从所有data-*属性初始化的对象。因此，您可以获得该对象，循环遍历它的属性名称，并找到对应的名称。
var div = $(".div1");
var data = div.data();
var name;
for (name in data) {
if (/^\d+$/.test(name) && data.hasOwnProperty(name)) {
// This is it
div.attr("data-" + name, "the new value");
break;
}
}如果名称在数字之后有其他内容，例如data-10-foo-bar，则这将无法工作，因为jQuery将dashed-names转换为camelCase。
为什么这样做效率低下：
- jQuery只需要做
attributes来构建数据对象 - 然后，它将数据对象存储在该元素的数据缓存中。
所以总的来说，我不会这样做的。
实况示例：
var div = $(".div1");
var data = div.data();
var name;
for (name in data) {
if (/^\d+$/.test(name) && data.hasOwnProperty(name)) {
// This is it
snippet.log("The attribute was data-" + name);
div.attr("data-" + name, "the new value");
break;
}
}<div class="div1" data-10="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
https://stackoverflow.com/questions/32035386
复制相似问题
腾讯云开发者
