Dodawanie atrybutu danych do DOM

170
$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

Tworzę element w jquery. Następnie chcę dodać atrybut „dane”. Jest jak i jest dodawany, ale w DOM nie jest to widoczne i nie mogę uzyskać tego elementu, używając

$('div[data-example="example"]').html()

jsfiddle

Luntegg
źródło

Odpowiedzi:

423

Użyj .data()metody:

$('div').data('info', '222');

Zauważ, że to nie tworzy rzeczywistego data-infoatrybutu. Jeśli chcesz utworzyć atrybut, użyj .attr():

$('div').attr('data-info', '222');
Mikser
źródło
6
@Luntegg: używaj, .data()chyba że naprawdę masz powód, aby użyć .attr().
Blender
9
.data()nie działa. Nie dodaje atrybutu danych do DOM i nie otrzymuję elementu według atrybutu danych ..
Luntegg
2
Musi to być również ciąg znaków - $ ('div'). Attr ('data-info', '' + info.id)
daviestar
1
wydaje się, .data(key, val)że utworzy attr. ktoś wie, dlaczego nie?
Luke W
16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():To był klucz do mojego problemu. Wielkie dzięki.
Mikayil Abdullayev
28

jQuery's .data () robi kilka rzeczy, ale nie dodaje danych do DOM jako atrybutu. Podczas używania go do pobierania atrybutu danych, pierwszą rzeczą, jaką robi, jest utworzenie obiektu danych jQuery i ustawienie wartości obiektu na atrybut danych. Następnie jest zasadniczo oddzielony od atrybutu danych.

Przykład:

<div data-foo="bar"></div>

Jeśli przechwycisz wartość atrybutu za pomocą .data('foo'), zwróci on „bar” zgodnie z oczekiwaniami. Jeśli następnie zmienisz atrybut za pomocą, .attr('data-foo', 'blah')a później użyjesz .data('foo')do pobrania wartości, zwróci on „bar”, nawet jeśli DOM tak mówi data-foo="blah". Jeśli użyjesz .data()do ustawienia wartości, zmieni to wartość w obiekcie jQuery, ale nie w DOM.

Zasadniczo .data()służy do ustawiania lub sprawdzania wartości danych obiektu jQuery. Jeśli go sprawdzasz, a jeszcze go nie ma, tworzy wartość na podstawie atrybutu danych znajdującego się w DOM. .attr()służy do ustawiania lub sprawdzania wartości atrybutu elementu DOM i nie wpływa na wartość danych jQuery. Jeśli potrzebujesz ich obu do zmiany, użyj obu .data()i .attr(). W przeciwnym razie trzymaj się jednego lub drugiego.

Brendon Shih
źródło
14

w Jquery „ dane ” nie są domyślnie odświeżane:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

Zamiast tego użyjesz „ attr ” do aktualizacji na żywo:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());
diego matos - keke
źródło
4
 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);
DrMabuse
źródło
3
Być może mógłbyś wyjaśnić, co się dzieje w Twoim kodzie, aby pomóc innym.
Mohamad Shiralizadeh
3

Użycie .data()spowoduje dodanie danych do obiektu jQuery tylko dla tego elementu. Aby dodać informacje do samego elementu, musisz uzyskać dostęp do tego elementu za pomocą jQuery .attrlub natywnego.setAttribute

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

Aby uzyskać dostęp do elementu z ustawionym atrybutem, możesz po prostu wybrać na podstawie tego atrybutu, jak zauważyłeś w swoim poście ( $('div[data-info="1"]')), ale kiedy używasz .data(), nie możesz. Aby dokonać wyboru na podstawie .data()ustawienia, musisz użyć funkcji filtru jQuery.

jsFiddle Demo

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>

Travis J.
źródło
0

aby uzyskać tekst z pliku

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');
costamatrix
źródło