Acessando o atributo data-id com jQuery

Ao trabalhar com o plugin jQuery Quicksand, muitas vezes é necessário recuperar o atributo 'data-id' dos elementos clicados para passar informações para vários serviços da web. Veja como obter efetivamente esse valor de atributo:

O atributo 'data-id' pode ser acessado usando o método .attr() em jQuery. A sintaxe é a seguinte:

$(this).attr("data-id")

Esta expressão retorna o valor do atributo 'data-id' como uma string.

Por exemplo, se o elemento clicado tiver o seguinte HTML:

O seguinte jQuery código irá recuperar o Atributo 'data-id':

$("#list li").on('click', function() {
  // Get the data-id value
  var dataId = $(this).attr("data-id");
  // Use the dataId value as needed
});

Como alternativa, você pode usar o método .data() para jQuery versões 1.4.3 e superiores. O método .data() retorna o valor 'data-id' como um tipo JavaScript nativo (por exemplo, número, booleano) em vez de uma string.

$(this).data("id")

Lembre-se, ao usar o método .data(), a parte após 'data-' deve estar em letras minúsculas. Por exemplo, 'data-idNum' falhará, enquanto 'data-idnum' terá sucesso.