Dodawanie atrybutu danych do DOM

$('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

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');

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.

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());

 $(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);

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>

aby uzyskać tekst z pliku

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

uf = $("#selectestado option:selected").attr('data-sigla');