Como definir atributos de dados em elementos HTML

233

Eu tenho uma div com um atributo data-myval = "10" . Eu quero atualizar seu valor; não mudaria se eu usasse div.data('myval',20)? Preciso usar div.attr('data-myval','20')apenas?

Estou ficando confuso entre HTML5 e jQuery? Por favor informar. Obrigado!

EDIT: atualizado div.data('myval')=20para div.data('myval',20), mas o HTML ainda não está sendo atualizado.

Pulkit Mittal
fonte
1
O que está dentro div? Um objeto ou elemento jQuery?
Brad
2
div.data('myval')=20não funcionaria para armazenar um valor apenas porque a sintaxe está incorreta - veja as respostas para a sintaxe correta. Mas observe que .data(), na verdade, não atualiza o atributo do elemento , ele armazena os dados em outro local.
Nnnnnn
Para quem tem o senso de evitar o gQuery, use isto -> div.dataset.myval = '20';
Harijs Krūtainis

Respostas:

448

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

Referência

A partir da referência:

O próprio jQuery usa o .data()método para salvar informações sob os nomes 'events' e 'handle' e também reserva qualquer nome de dados começando com um sublinhado ('_') para uso interno.

Note-se que o jQuery data()não altera o dataatributo em HTML.

Portanto, se você precisar alterar o dataatributo em HTML, use-o .attr().

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

Veja esta demonstração

Jashwant
fonte
Eu não sei o que a consistência que você precisa, mas eu recomendaria a utilização data()de gete setHTML-5 atributos de dados.
Jashwant
7
@Jashwant pode ser uma edição útil: pense em uma regra css [data-myval="10"]{ color: red; }, ela estilizaria a tag de acordo com o valor do atributo de dados.
TechNyquist
4
.data não funciona. .attr funciona. pode ser que possamos editar a resposta para deixar claro. parece que o primeiro é a solução, embora possa ser um pouco melhor exposta. não sei como explicar melhor, é por isso que não edito a postagem.
Gaúcho
@ Gaúcho, está melhor agora?
Jashwant
1
Os dados do @ Gaúcho só funcionarão se você usar o jQuery mais recente> = 1.4.3, para versões mais antigas o .attr funcionará.
Ilias
41

Você também pode usar o seguinte attr;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

Roteiro

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

OU

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
Baqer Naqvi
fonte
6
Para mim, trabalhou apenas com .attr. É mesmo possível?
Zariweya
Estou feliz que funcionou. A chamada .data () é especial - não apenas recupera atributos de dados HTML5, mas também tenta avaliar / analisar os atributos. Portanto, com um atributo como data-myval = '{"hello": "world"}' quando recuperado via .data () retornará um Objeto enquanto a recuperação via .attr () retornará uma string.
Baqer Naqvi
32

Observe que o jQuery .data()não é atualizado quando você altera os data-atributos html5 com javascript.

Se você usa o jQuery .data()para definir data-atributos nos elementos HTML, é melhor usar o jQuery .data()para lê-los. Caso contrário, poderá haver inconsistências se você atualizar os atributos dinamicamente. Por exemplo, veja setAttribute(), dataset(), attr()abaixo. Altere o valor, pressione o botão várias vezes e consulte o console.

Johann Echavarria
fonte
29

Solução Javascript Vanilla

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

  • Usando a getAttribute()propriedade do DOM

     var brand = mydiv.getAttribute("data-myval")//returns "10"
     mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
     mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
  • Usando a datasetpropriedade JavaScript

    var myval = mydiv.dataset.myval     //returns "10"
    mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
    mydiv.dataset.myval = null          //removes "data-myval" attribute
rajesh kakawat
fonte
8

Se você estiver usando jQuery, use .data():

div.data('myval', 20);

Você pode armazenar dados arbitrários com .data(), mas está restrito a apenas seqüências de caracteres ao usá-lo .attr().

Liquidificador
fonte
14
Observe que o .data()método não atualiza data- atributos - ou seja, os dados que ele armazena não terminam em um atributo (é por isso que ele pode armazenar valores que não são de cadeia), mesmo que ele possa recuperar o valor de um data-atributo. Embora eu suspeite que o OP realmente não precise definir atributos, mesmo que seja o que a pergunta foi feita.
Nnnnnn
1
Eu não acho que seria um problema (além do que você mencionou, ou se houver outro código usado .attr()para recuperar o atributo). Eu apenas pensei que valeria a pena mencionar, uma vez que o OP perguntou explicitamente (se não por engano) sobre a atualização de atributos.
Nnnnnn
1
@ Blender isso realmente não responde à minha pergunta. Quero atualizar o HTML, mas, ao mesmo tempo, use o element.data ('myval') para recuperá-lo também.
Pulkit Mittal
1
Preciso fazer isso porque os elementos gerados na carga do documento têm esses atributos de dados, e quero fazê-lo também para os novos elementos dinâmicos. Sei que pode não haver uma necessidade específica disso, mas quero manter uma consistência.
Pulkit Mittal
1
@PulkitMittal - Observe que, mesmo que .attr()você não esteja realmente atualizando "o html", está atualizando o DOM. Quando você solicita que o navegador forneça o "html" (por .html()ou pelo DOM element.innerHTML), o navegador efetivamente o regenera para você com base no estado do DOM no momento. Tipo de.
Nnnnnn
3

[jQuery] .data () vs .attr () vs .extend ()

O método jQuery .data()atualiza um objeto interno gerenciado pelo jQuery através do uso do método, se eu estiver correto.

Se você deseja atualizar o seu data-attributescom alguma propagação, use -

$('body').attr({ 'data-test': 'text' });

- caso contrário, $('body').attr('data-test', 'text');funcionará bem.

Outra maneira de conseguir isso é usando -

$.extend( $('body')[0].dataset, { datum: true } );

- que restringe qualquer alteração de atributo para HTMLElement.prototype.dataset, e não qualquer adicionalHTMLElement.prototype.attributes .

Cody
fonte
2

Outra maneira de definir o atributo de dados é usar a propriedade do conjunto de dados .

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

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true
CloudBranch
fonte
0

Para manter o jQuery e o DOM sincronizados, uma opção simples pode ser

$('#mydiv').data('myval',20).attr('data-myval',20);        
J. McNerney
fonte