Change Data-unknown Attribute Value

i have page with 3 divs each div has 2 data-attribute for example

i can change the value of the dat

Solution 1:

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

<divclass="div1"data-10="foo"></div><scriptsrc="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 --><scriptsrc="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";
    returntrue;
  }
});

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";
    returntrue;
  }
});

<divclass="div1"data-10="foo"></div><scriptsrc="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 --><scriptsrc="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");
vardata = div.data();
var name;
for (name indata) {
  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:

1. jQuery just has to do the attributes thing to build the data object

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

<divclass="div1"data-10="foo"></div><scriptsrc="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 --><scriptsrc="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Solution 2:

Edit, Updated

still doesn't change the value of the data-attr

jQuery .data() does not change data-* attributes , see jQuery's .data() doesn't append attribute to DOMElement , jQuery Data vs Attr? .

Try utilizing HTMLElement.dataset (ie11) to set actual htmldataset , e.g.,

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

only want to change the second data-attribute , i don't care about the first one

Try utilizing .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"]);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="div1"data-10="some value"data-30="some value"></div>