Javascript 更改数据未知属性值

我有一个有3个div的页面，例如每个div有2个数据属性

<div class="div1" data-10="some value" data-30="some value"></div>

但问题是数据属性的第二部分未知（数据未知编号）

我不知道这个符号“

-

”后面的数字，它可能是

30,40,50或任何一个

，因此我如何选择要更改其值的数据属性

我只想更改第二个数据属性，我不关心第一个

我怎么做

---

首先，我必须同意Vohuman的观点：我不会这么做，我会把名字改成一致的名字。我不明白为什么必须这样做才能使其响应，因为您不仅可以在CSS中使用属性，还可以使用它们的值，例如：

[data-width="100"] {
    /* Rules here */
}

但在回答你实际提出的问题时：

两种选择：

使用DOM DOM提供了获取元素上所有属性的方法：

var attrs = $(".div1")[0].attributes;    // [0] = Get the raw element

（显然，如果需要对所有匹配元素执行此操作，请使用循环和索引，而不是直接使用

0

）

这是一个可以循环使用的方法：

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

vari，attr；
对于（i=0；i

现场示例：

var attrs=$（“.div1”）[0]。属性；//[0]=获取原始元素
varⅠ，attr；
对于（i=0；i

---

首先，我必须同意Vohuman的观点：我不会这么做，我会将名称更改为一致的名称。我不明白为什么必须这样做才能使其响应，因为您不仅可以在CSS中使用属性，还可以使用它们的值，例如：

[data-width="100"] {
    /* Rules here */
}

但在回答你实际提出的问题时：

两种选择：

使用DOM DOM提供了获取元素上所有属性的方法：

var attrs = $(".div1")[0].attributes;    // [0] = Get the raw element

（显然，如果需要对所有匹配元素执行此操作，请使用循环和索引，而不是直接使用

0

）

这是一个可以循环使用的方法：

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

vari，attr；
对于（i=0；i

现场示例：

var attrs=$（“.div1”）[0]。属性；//[0]=获取原始元素
varⅠ，attr；
对于（i=0；i

编辑、更新

---

仍然不会更改数据属性的值

jQuery

.data（）

不会更改

data-*

属性，请参阅

尝试利用（ie11）设置实际的

html

dataset

，例如

elem[0].dataset[key] = "margin-top:100px";

只想更改第二个数据属性，我不关心 第一个

尝试利用

.data（）

，

$.map（）

var索引=0，elem=$（“.div1”）；
$.map（elem.data（），函数（值，键）{
++指数；
//如果'index'是'2`
如果（索引==2）{
//使用第二个`data-*`属性进行填充
//更改该数据属性的值
//例如“页边距顶部：100px”`
元素数据（键，“页边距顶部：100px”）；
//仍然不会更改数据属性的值
元素[0]。数据集[key]=“页边距顶端：100px”；
}
});
console.log（elem.data（），elem[0].dataset[“30”]

编辑、更新

仍然不会更改数据属性的值

jQuery
.data（）
不会更改
data-*
属性，请参阅

尝试利用（ie11）设置实际的
html
dataset
，例如

elem[0].dataset[key] = "margin-top:100px";

只想更改第二个数据属性，我不关心
第一个

尝试利用
.data（）
，
$.map（）


var索引=0，elem=$（“.div1”）；
$.map（elem.data（），函数（值，键）{
++指数；
//如果'index'是'2`
如果（索引==2）{
//使用第二个`data-*`属性进行填充
//更改该数据属性的值
//例如“页边距顶部：100px”`
元素数据（键，“页边距顶部：100px”）；
//仍然不会更改数据属性的值
元素[0]。数据集[key]=“页边距顶端：100px”；
}
});
console.log（elem.data（），elem[0].dataset[“30”]

与其调用它
data-[num]
不如直接调用它
data unknown
并将其作为目标。我的意思是，听起来似乎名称不相关，只是值，所以名称最终是什么并不重要。这里有点不对劲。为什么
data-*
属性应该是“未知的”？@Vohuman数据-*是未知的，因为这个数字是可变的，取决于屏幕的宽度和高度，我将它用于视差接近，它应该是一个值，而不是一个键。使用
数据高度
或
数据宽度
不是更有意义吗？@Vohuman不，我必须使用数据编号并使其响应，编号不是未知的，而不是调用它
数据-[num]
为什么不直接调用它
数据未知
，并将其作为目标。我