Se você estiver passando dados para um elemento DOM do servidor, defina os dados no elemento:
<a id="foo" data-foo="bar" href="#">foo!</a>
Os dados podem ser acessados usando .data()
no jQuery:
console.log( $('#foo').data('foo') );
//outputs "bar"
No entanto, quando você armazena dados em um nó DOM no jQuery usando dados, as variáveis são armazenadas no objeto do nó . Isso serve para acomodar objetos e referências complexos, pois o armazenamento dos dados no elemento do nó como um atributo acomodará apenas valores de sequência.
Continuando meu exemplo acima:
$('#foo').data('foo', 'baz');
console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed
console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object
Além disso, a convenção de nomenclatura para atributos de dados tem um pouco de "pegadinha" oculto:
HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd
A chave hifenizada ainda funcionará:
HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"
No entanto, o objeto retornado por .data()
não terá a chave hifenizada definida:
$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work
É por esse motivo que sugiro evitar a chave hifenizada em javascript.
Para HTML, continue usando o formulário hifenizado. Atributos HTML é suposto a obter automaticamente em minúsculas-ASCII , então <div data-foobar></div>
, <DIV DATA-FOOBAR></DIV>
e <dIv DaTa-FoObAr></DiV>
são suposto ser tratados como idênticos, mas para a melhor compatibilidade deve ser preferido a forma minúsculas.
O .data()
método também executará alguma conversão automática básica se o valor corresponder a um padrão reconhecido:
HTML:
<a id="foo"
href="#"
data-str="bar"
data-bool="true"
data-num="15"
data-json='{"fizz":["buzz"]}'>foo!</a>
JS:
$('#foo').data('str'); //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num'); //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`
Essa capacidade de transmissão automática é muito conveniente para instanciar widgets e plugins:
$('.widget').each(function () {
$(this).widget($(this).data());
//-or-
$(this).widget($(this).data('widget'));
});
Se você absolutamente precisa ter o valor original como uma string, precisará usar .attr()
:
HTML:
<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>
JS:
$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers
$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6
Este foi um exemplo artificial. Para armazenar valores de cores, eu costumava usar a notação hexadecimal numérica (ou seja, 0xABC123), mas vale a pena notar que o hex foi analisado incorretamente nas versões do jQuery anteriores à 1.7.2 e não é mais analisado no a Number
partir do jQuery 1.8 rc 1.
O jQuery 1.8 rc 1 mudou o comportamento da conversão automática . Antes, qualquer formato que fosse uma representação válida de a Number
seria convertido em Number
. Agora, os valores numéricos só são convertidos automaticamente se sua representação permanecer a mesma. Isso é melhor ilustrado com um exemplo.
HTML:
<a id="foo"
href="#"
data-int="1000"
data-decimal="1000.00"
data-scientific="1e3"
data-hex="0x03e8">foo!</a>
JS:
// pre 1.8 post 1.8
$('#foo').data('int'); // 1000 1000
$('#foo').data('decimal'); // 1000 "1000.00"
$('#foo').data('scientific'); // 1000 "1e3"
$('#foo').data('hex'); // 1000 "0x03e8"
Se você planeja usar sintaxe numérica alternativa para acessar valores numéricos, certifique-se de converter o valor em um Number
primeiro, como em um +
operador unário .
JS (cont.):
+$('#foo').data('hex'); // 1000