11

Eu tenho um atributo data-order em um botão e eu quero ele seja incrementado de acordo com que eu vá adicionando novos days à minha lista através do clique do botão, assim terei:

day-1
day-2
day-3
day-4

... e assim por diante. Alguém sabe como eu posso incrementar esse valor em jQuery?

P.S.: O botão tem um ID único. Eu só não sei como fazer a incrementação.

EDIT: A pergunta não é sobre concatenação, mas sobre alterar o valor do data-order. Eu só tenho um desses atributos e quero alterar o seu valor de day-1 para day-2.

5 Respostas 5

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

Fiz uma alteração no exemplo só para ficar mais fácil a ilustração. http://jsfiddle.net/Agr7p/10/ Abraços!

2
  • Exatamente isso que eu estava querendo cara, vlw! o/ Commented 31/01/2014 às 14:35
  • Se possível, crie um exemplo utilizando a ferramenta trecho de código aqui no SOpt. Assim, se por algum motivo der problema no código postado no JSFiddle a pergunta não deixará de ser útil. Commented 26/11/2014 às 21:25
6

As demais respostas estão assumindo que você pretende usar exclusivamente o método .data do jQuery, e parece estarem corretas, mas é bom fazer uma distinção: os atributos data-* do HTML5 não são a mesma coisa que os dados armazenados pelo jQuery através do método .data. O jQuery armazena esses dados internamente, e isso não se reflete no elemento original. Exemplo.

Se você por alguma razão quiser atualizar o próprio elemento, não atribua usando .data, mas sim usando .attr. A leitura também deve ser feita da mesma forma - pois o .data apenas coloca o primeiro valor encontrado em cache, depois não consulta mais o elemento.

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

Exemplo no jsFiddle. Se você inspecionar o botão no browser, verá que ele de fato possui o atributo data-order com um valor atualizado.

5

Deixo mais uma resposta (para browsers modernos) que é usando a API do HTML5.

Na verdade não vai ser preciso jQuery para isto, pode usar-se o dataset.

A API é simples:

Elemento.dataset.nome // para ler
Elemento.dataset.nome = 'novo valor' // para atribuir

Exemplo:

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>

Para fazer com JS puro em browsers antigos que não suportam HTML5 pode usar-se getAttribute/setAttribute.

Nota: como o @mgibsonbr referiu o jQuery não muda a mesma propriedade que o JavaScript puro muda!

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

Ai, ai... -1 para o jQuery.

4

data-* são atributos personalizáveis de elementos HTML, ele é armazenado como propriedade string no objeto dataset do elemento. Se você está salvando uma lista de valores nele, na realidade você está concatenando string.

Por exemplo:

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

Isso pode ser adicionado ao evento de clique que vai resultar em adicionar valores ao atributo data-order, mas vai ficar assim:

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

Você pode quebrar essa string depois em uma Array pra poder tratar os valores por exemplo:

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

EDIT (apos melhor explicação da pergunta):

No caso de querer incrementar o valor de day-{n} contido em data, você pode usar o String.prototype.match pra pegar o valor existente.

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

Dessa maneira você não vai precisar fazer cache do numero em uma variável e vai poder usar sempre o valor contido em data-*

5
  • Essa é uma boa resposta, mas não é exatamente o que eu estava perguntando. Perguntava sobre como alterar o valor do data-order de day-1 para day-2. Commented 31/01/2014 às 14:27
  • para o atributo data use a função api.jquery.com/data em vez de attr ... motivo: stackoverflow.com/questions/7261619/jquery-data-vs-attr Commented 31/01/2014 às 14:29
  • 1
    @DennisBraga ah, não tinha entendido direito, achei que você estava querendo uma lista ordenada, mas então a resposta do Daniel satisfaz. Só vou corrigir a questão do attr pra data, pois é ideal com jquery. Commented 31/01/2014 às 16:07
  • Gostei de edit feito à pergunta. Muito bom mesmo! Essa de não precisar guardar em cache o resultado, é show! :D Commented 31/01/2014 às 16:25
  • @DennisBraga fico feliz em poder ajudar, melhorei a sintaxe pra caso o valor data('order') venha vazio não dar erro no seu código. Abraço! Commented 31/01/2014 às 16:30
1

os atributos data podem ser mudados com o metodo data do proprio jQuery uma solução pontual pode ser a seguinte...

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .