How to change attribute value dynamically in jquery?

Question

I have three set of columns. Each column having a different kind of data attribute name with integer value. The data attribute name value will change incremently 500 based on length of div.

This is my html structure,

<div class="column">
  <div data-0="100"></div>
  <div data-500="200"></div>
  <div data-1000="300"></div>
</div>
<div class="column">
  <div data-1500="400"></div>
  <div data-{increase value from prev child}="{increase value from prev child}"></div>
  <div data-increase value from prev child="{increase value from prev child}"></div>
<div data-{increase value from prev child}="{increase value from prev child}"></div>
  <div data-increase value from prev child="{increase value from prev child}"></div>
</div>
<div class="column">
  <div data-{increase value from prev child}="{increase value from prev child}"></div>
  <div data-increase value from prev child="{increase value from prev child}"></div>
<div data-{increase value from prev child}="{increase value from prev child}"></div>
  <div data-increase value from prev child="{increase value from prev child}"></div>
<div data-{increase value from prev child}="{increase value from prev child}"></div>
  <div data-increase value from prev child="{increase value from prev child}"></div>
</div>

How to achieve this logic with jquery?

Answer 1

This is one of the ways to do it. Look for comments inline.

//All columns
var $columns = $(".column");
//Grab the first div from the first column
var $firstColumnFirstChild = $columns.first().find("div").first();
//Grab the data attribute name (0) from '$firstColumnFirstChild' and convert it to number
var $firstColumnFirstChildKey = parseInt(Object.keys($firstColumnFirstChild.data()), 10);
//Set initial value
var $initial = 100;

//Go thru each div in all columns
$columns.find("div").each(function(_, elem) {

    //Set data attribute (name and value)
    $(elem).attr("data-" + $firstColumnFirstChildKey, $initial);
    //Increment for future divs
    $firstColumnFirstChildKey += 500;
    $initial += 100;
});

Here is a demo for the above.

Answer 2

Updated example with requirements: https://jsfiddle.net/ozvkdw1p/1/

$(function() {
    var $col = $(".column")
    //grab first attribute of first element, extract values
    var initAttr = $("div", $col).get(0).attributes[0]
    var initName = parseInt(initAttr.name.split("-")[1])
    var initValue = parseInt(initAttr.value)
    $("div", $col).each(function() {
        $(this).removeAttr(this.attributes[0].name) //remove first attribute
        $(this).attr("data-" + initName, initValue) //add attribute with correct values
        //increment values for next iteration
        initName += 500 
        initValue += 100
    })
})

Grabs the data from the firts element, then updates the other elements with incrementing values

Answer 3

You could archive this more easier using AngularJS framework. With this is is quite easy to combine javascript values with hmtl (-attributes, .. )