First, I must agree with Vohuman: I wouldn't do this, I'd change the name to something consistent. I'm not seeing why you have to do this to make it responsive, since you can use not just attributes but their values in CSS, e.g.:
[data-width="100"] {
/* Rules here */
}
But answering the question you actually asked:
Two Options:
Use the DOM
The DOM provides an attributes property for getting all of the attributes on an element:
var attrs = $(".div1")[0].attributes; // [0] = Get the raw element
(Obviously, if you need to do this to all matching elements, use a loop and index rather than 0 directly.)
It's a NamedNodeMap that you can loop through:
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;
}
}
Live Example:
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>
If you use ES5 methods in your environment (you don't have to support really old browsers or you use a shim for them), we can make that a tiny bit more concise but quite possibly less clear:
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>
Use jQuery's data to figure out the name, then attr to change it
Note: This is inefficient.
jQuery's data method will return an object that is initialized from all of the data-* attributes. So you can get that object, loop through its property names, and find the name that corresponds.
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;
}
}
This will not work if the names have other thing after the digits, such as data-10-foo-bar, because jQuery converts dashed-names into camelCase.
Why this is inefficient:
jQuery just has to do the attributes thing to build the data object
It then stores the data object in its cache of data for that element
So on the whole, I wouldn't do it this way.
Live Example:
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>
