Как установить атрибуты данных в элементах HTML


233

У меня есть div с атрибутом data-myval = "10". Я хочу обновить его значение; не изменится ли я, если я буду использовать div.data('myval',20)? Нужно ли использовать div.attr('data-myval','20')только?

Я запутался между HTML5 и jQuery? Пожалуйста, порекомендуйте. Спасибо!

РЕДАКТИРОВАТЬ: Обновлено div.data('myval')=20до div.data('myval',20), но по-прежнему HTML не обновляется.


1
Что внутри div? Объект или элемент jQuery?
Брэд

2
div.data('myval')=20не будет работать, чтобы сохранить значение только потому, что синтаксис неправильный - см. ответы для правильного синтаксиса. Но обратите внимание, что на .data()самом деле не обновляет атрибут элемента , он хранит данные в другом месте.
nnnnnn

Для тех, кто имеет смысл избегать gQuery, используйте это -> div.dataset.myval = '20';
Харийс Крутейнис

Ответы:


448

HTML

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

JS

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

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

демонстрация

Ссылка

Из ссылки:

Сам JQuery использует .data() метод для сохранения информации под именами 'events' и 'handle', а также резервирует любое имя данных, начинающееся с подчеркивания ('_'), для внутреннего использования.

Следует отметить, что JQuery data()не меняетdata атрибут в HTML.

Итак, если вам нужно изменить dataатрибут в HTML, вы должны использовать.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>

Посмотреть эту демонстрацию


Я не знаю, какая согласованность вам нужна, но я бы порекомендовал использовать атрибуты данных data()to getи setHTML-5.
Jashwant

7
Вместо этого может быть полезен @Jashwant: подумайте о правиле CSS, например [data-myval="10"]{ color: red; }, он будет стилизовать тег в соответствии со значением атрибута данных.
TechNyquist

4
.data не работает. .attr работает. может быть, мы можем отредактировать ответ, чтобы было понятно. кажется, первое - это решение, хотя оно может быть немного лучше раскрыто. я не уверен, как лучше объяснить, вот почему я не редактирую пост.
Гаучо

@ Гаучо, теперь лучше?
Jashwant

1
@Gaucho .data будет работать только в том случае, если вы используете более новую версию jQuery> = 1.4.3, для более старых версий .attr будет работать.
Илиас

41

Вы также можете использовать следующую attrвещь;

HTML

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

скрипт

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

ИЛИ

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

6
У меня работал только с .attr. Это вообще возможно?
Заривея

Я рад, что это сработало. Вызов .data () является особенным - он не только извлекает атрибуты данных HTML5, но и пытается оценить / проанализировать атрибуты. Таким образом, с таким атрибутом, как data-myval = '{"hello": "world"}' при получении с помощью .data () вернет объект, а при получении с помощью .attr () вернет строку.
Бакер Накви

32

Обратите внимание, что jQuery .data()не обновляется при изменении html5.data- атрибутов с помощью javascript.

Если вы используете jQuery .data()для установки data-атрибутов в элементах HTML, вам лучше использовать jQuery .data()для их чтения. В противном случае могут возникнуть несоответствия, если вы обновите атрибуты динамически. Например, см setAttribute(), dataset(), attr()ниже. Измените значение, нажмите кнопку несколько раз и увидите консоль.


29

Ванильное решение Javascript

HTML

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

JavaScript:

  • Использование getAttribute()свойства 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
  • Использование datasetсвойства 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

8

Если вы используете jQuery, используйте .data():

div.data('myval', 20);

Вы можете хранить произвольные данные с помощью .data(), но при использовании вы ограничены только строками .attr().


14
Обратите внимание, что .data()метод не обновляет data- атрибуты - то есть данные, которые он хранит, не попадают в атрибут (поэтому он может хранить не строковые значения), даже если он может извлечь значение из data-атрибута. Хотя я подозреваю, что OP на самом деле не нужно устанавливать атрибуты, хотя это то, что задал вопрос.
nnnnnn

1
Я не думаю, что это будет проблемой (помимо того, что вы упомянули, или если есть другой код, который использует .attr()для получения атрибута). Я просто подумал, что на это стоит обратить внимание, учитывая, что ОП явно (если возможно, по ошибке) спросил об обновлении атрибутов.
nnnnnn

1
@ Блендер, на самом деле это не отвечает на мой вопрос. Я хочу обновить HTML, но в то же время использовать element.data ('myval'), чтобы также получить его.
Pulkit Mittal

1
Мне нужно сделать это, потому что элементы, сгенерированные при загрузке документа, имеют атрибуты данных, и я хочу сделать это и для новых динамических элементов. Я знаю, что в этом нет особой необходимости, но я хочу сохранить последовательность.
Pulkit Mittal

1
@PulkitMittal - обратите внимание, что даже .attr()если вы не обновляете «HTML», вы обновляете DOM. Когда вы просите браузер предоставить вам «html» ( .html()или с помощью DOM element.innerHTML), браузер эффективно восстанавливает его для вас в зависимости от состояния DOM на тот момент. Вроде, как бы, что-то вроде.
nnnnnn

3

[jQuery] .data () против .attr () против .extend ()

Метод jQuery .data()обновляет внутренний объект, управляемый jQuery, с помощью метода, если я прав.

Если вы хотите обновить свой data-attributesс некоторым распространением, используйте -

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

- иначе все $('body').attr('data-test', 'text');будет работать нормально.

Еще один способ сделать это -

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

- который ограничивает любое изменение атрибута HTMLElement.prototype.dataset, а не любое дополнительноеHTMLElement.prototype.attributes .


2

Другой способ установить атрибут data - использовать свойство набора данных .

<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

0

Чтобы синхронизировать JQuery и DOM, можно использовать простой вариант:

$('#mydiv').data('myval',20).attr('data-myval',20);        
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.