Jak ustawić atrybuty danych w elementach HTML

233

Mam div z atrybutem data-myval = "10". Chcę zaktualizować jego wartość; czy to się nie zmieni, jeśli użyję div.data('myval',20)? Czy muszę używać div.attr('data-myval','20')tylko?

Czy mylę się między HTML5 a jQuery? Proszę doradź. Dzięki!

EDYCJA: Zaktualizowano div.data('myval')=20do div.data('myval',20), ale HTML wciąż się nie aktualizuje.

Pulkit Mittal
źródło
1
Co jest div? Obiekt lub element jQuery?
Brad
2
div.data('myval')=20nie działałoby przechowywać wartości tylko dlatego, że składnia jest niepoprawna - zobacz odpowiedzi na poprawną składnię. Należy jednak pamiętać, że .data()tak naprawdę nie aktualizuje atrybutu elementu , ale przechowuje dane w innym miejscu.
nnnnnn
Dla tych, którzy mają sens, aby unikać gQuery, użyj tego -> div.dataset.myval = '20';
Harijs Krūtainis

Odpowiedzi:

448

HTML

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

JS

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

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

Próbny

Odniesienie

Z referencji:

Sam jQuery używa tej .data()metody do zapisywania informacji pod nazwami „zdarzenia” i „uchwyt”, a także rezerwuje wszelkie nazwy danych zaczynające się od znaku podkreślenia („_”) do użytku wewnętrznego.

Należy zauważyć, że jQuery's data()nie zmienia dataatrybutu w HTML.

Jeśli więc musisz zmienić dataatrybut w HTML, powinieneś użyć .attr()zamiast tego.

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>

Zobacz to demo

Jashwant
źródło
Dont wiem co konsystencja trzeba, ale polecam do użytku data()na geti setHTML 5 danych atrybutów.
Jashwant
7
@Jashwant może być użyteczną edycją zamiast tego: pomyśl o regule css [data-myval="10"]{ color: red; }, która stylizuje tag zgodnie z wartością atrybutu danych.
TechNyquist
4
.data nie działa. .attr działa. być może możemy edytować odpowiedź, aby była jasna. wydaje się, że pierwsze jest rozwiązaniem, podczas gdy może być nieco lepiej wyeksponowane. nie jestem pewien, jak lepiej to wyjaśnić, dlatego nie edytowałem posta.
Gaucho,
@Gaucho, czy teraz jest lepiej?
Jashwant
1
@Gaucho .data będzie działać tylko wtedy, gdy użyjesz nowszego jQuery> = 1.4.3, dla starszych wersji .attr będzie działać.
Ilias,
41

Możesz także użyć następującej attrrzeczy;

HTML

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

Scenariusz

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

LUB

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
Baqer Naqvi
źródło
6
Dla mnie pracował tylko z .attr. Czy to w ogóle możliwe?
Zariweya,
Cieszę się, że zadziałało. Wywołanie .data () jest wyjątkowe - nie tylko pobiera atrybuty danych HTML5, ale także próbuje je oceniać / analizować. Tak więc z atrybutem takim jak data-myval = '{"hello": "world"}' po pobraniu za pomocą .data () zwróci obiekt, podczas gdy za pomocą .attr () zwróci ciąg.
Baqer Naqvi
32

Należy pamiętać, że jQuery .data()nie jest aktualizowany po zmianie data-atrybutów html5 za pomocą javascript.

Jeśli używasz jQuery .data()do ustawiania data-atrybutów w elementach HTML, lepiej użyj jQuery .data()do ich odczytania. W przeciwnym razie mogą wystąpić niespójności, jeśli dynamicznie aktualizujesz atrybuty. Na przykład, patrz setAttribute(), dataset(), attr()poniżej. Zmień wartość, naciśnij przycisk kilka razy i zobacz konsolę.

Johann Echavarria
źródło
29

Waniliowe rozwiązanie Javascript

HTML

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

JavaScript:

  • Korzystanie z getAttribute()właściwości 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
  • Korzystanie z datasetwłaściwości 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
źródło
8

Jeśli używasz jQuery, użyj .data():

div.data('myval', 20);

Możesz przechowywać dowolne dane .data(), ale podczas korzystania jesteś ograniczony do samych łańcuchów .attr().

Mikser
źródło
14
Zauważ, że .data()metoda nie aktualizuje data- atrybutów - to znaczy, że przechowywane przez nią dane nie kończą się atrybutem (dlatego może przechowywać wartości nie łańcuchowe), nawet jeśli może pobrać wartość z data-atrybutu. Chociaż podejrzewam, że OP tak naprawdę nie musi ustawiać atrybutów, nawet jeśli o to właśnie pytano.
nnnnnn
1
Nie sądzę, że byłby to problem (poza tym, o czym wspomniałeś, lub jeśli istnieje inny kod, który używa .attr()do pobrania atrybutu). Po prostu pomyślałem, że warto na to zwrócić uwagę, biorąc pod uwagę, że OP wyraźnie (choć może mylnie) zapytał o aktualizację atrybutów.
nnnnnn
1
@Blender nie odpowiada na moje pytanie. Chcę zaktualizować HTML, ale jednocześnie użyj element.data („myval”), aby go również pobrać.
Pulkit Mittal
1
Muszę to zrobić, ponieważ elementy generowane przy ładowaniu dokumentów mają je jako atrybuty danych, i chcę to zrobić również w przypadku nowych elementów dynamicznych. Wiem, że nie ma takiej potrzeby, ale chcę zachować spójność.
Pulkit Mittal
1
@PulkitMittal - Pamiętaj, że nawet .attr()jeśli tak naprawdę nie aktualizujesz „html”, aktualizujesz DOM. Gdy poprosisz przeglądarkę o podanie „html” (czy to przez .html()DOM element.innerHTML), przeglądarka efektywnie go regeneruje na podstawie stanu DOM w danym momencie. Raczej.
nnnnnn
3

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

Metoda jQuery .data()aktualizuje wewnętrzny obiekt zarządzany przez jQuery za pomocą metody, jeśli mam rację.

Jeśli chcesz zaktualizować swój data-attributesspread, użyj -

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

- w przeciwnym razie $('body').attr('data-test', 'text');będzie dobrze działać.

Innym sposobem na osiągnięcie tego jest użycie -

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

- która ogranicza wszelkie zmiany atrybutów do HTMLElement.prototype.dataset, a nie żadnych dodatkowychHTMLElement.prototype.attributes .

Cody
źródło
2

Innym sposobem ustawienia atrybutu danych jest użycie właściwości zestawu danych .

<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
źródło
0

Prostą opcją może być synchronizacja jQuery i DOM

$('#mydiv').data('myval',20).attr('data-myval',20);        
J. McNerney
źródło