How do I change the value of a "date" attribute in JQuery?

var valor = 0;
$('#botao').on('click', function () {
    valor++;
    $(this).data('order', 'day-' + valor);
});

• Example: link

I made a change to the example just to make the illustration easier. link Hugs!

All other answers are assuming that you intend to use jQuery's .data method exclusively, and they seem to be correct, but it's good to make a distinction: are not the same as the data stored by jQuery through the data-* method. JQuery stores this data internally, and this is not reflected in the original element. Example .

If you for some reason want to update the element itself, do not assign using .data , but using .data . The reading should also be done the same way - because .attr only puts the first value found in cache, then does not query the element anymore.

var valor = $(this).attr('data-order').split('-')[1];
valor++;
$(this).attr('data-order', 'day-' + valor);

Example in jsFiddle . If you inspect the button in the browser, you will see that it does indeed have the .data attribute with an updated value.

I leave one more answer ( for modern browsers ) that is using the HTML5 API.

In fact you will not need jQuery for this, you can use dataset .

The API is simple:

   name in> 'new value' // to assign

Example:

var el = document.querySelector('#user');
var resultados = document.querySelector('#resultados');

// visualizar os campos data- 
// repare que pode verificar a existência de campos como "dateOfBirth" que não existe ainda, vai dar false
resultados.innerHTML = [el.dataset.id, el.dataset.user, !!el.dataset.dateOfBirth].join(' - '); 

el.dataset.dateOfBirth = '1960-10-03'; // settar a data.
resultados.innerHTML += ' - ' + el.dataset.dateOfBirth;

<div id="user" data-id="1234567890" data-user="johndoe">John Doe</div>

<div id="resultados"></div>

To do with pure JS in older browsers that do not support HTML5 you can use getAttribute / setAttribute .

Note: Like @mgibsonbr referred jQuery does not change the same property that pure JavaScript changes!

$(el).data('foo', 'bar'); // seta o valor
$(el).data('foo'); // dá bar
el.dataset.foo;    // dá undefined

Alas, alas ... -1 for jQuery.

data-* are customizable attributes of HTML elements, it is stored as a string property in the dataset object of the element. If you're saving a list of values in it, you're actually concatenating string.

For example:

var num = 0; // a fins de exemplo
$('#meu_botao').data('order', $('#meu_botao').data('order') + ', day-' + num++);

This can be added to the click event that will result in adding values to the data-order attribute, but will look like this:

'day-1, day-2, day-3' // e por ai vai, conforme for sendo adicionado

You can break this string later in an Array to handle the values for example:

$('#meu_botao').data('order').split(', '); // ["day-1", "day-2", "day-3"]

EDIT (after best explanation of the question):

In case you want to increment the value of day- {n} contained in date, you can use String.prototype.match to get the existing value.

var num = $('#meu_botao').data('order').match(/day-([0-9]*)/), num = num && + num[1] || 0;
$('#meu_botao').data('order', 'day-' + num++);

This way you will not need to cache the number in a variable and will always be able to use the value contained in data-*

date attributes can be changed with date method of jQuery itself a one-time solution might be as follows ...

var order = $("#meu_elemento").data("order");
var indice = +(order.split("-")[1]);
indice++;
$("#meu_elemento").data("order", "day-" + order);