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


I have a data-order attribute on a button and I want it to be incremented as I go adding new days to my list by clicking the button, so I will have:


... and so on. Does anyone know how I can increment this value in jQuery?

Q: The button has a unique ID. I just do not know how to do the incrementing.

EDIT: The question is not about concatenation, but about changing the value of data-order . I only have one of these attributes and I want to change its value from day-1 to day-2 .

asked by anonymous 31.01.2014 / 15:13

5 answers

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

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

31.01.2014 / 15:33

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];
$(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.

04.02.2014 / 08:53

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


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.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;    // dá undefined

Alas, alas ... -1 for jQuery.

26.11.2014 / 21:39

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-*

31.01.2014 / 15:23

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]);
$("#meu_elemento").data("order", "day-" + order);
31.01.2014 / 15:31