Hinzufügen eines Datenattributs zu DOM

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

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

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

Ich erstelle ein Element in jquery. Danach möchte ich das Attribut "Daten" hinzufügen. Er ist wie und wird hinzugefügt, aber im DOM ist dies nicht ersichtlich und ich kann den Gegenstand nicht mit bekommen

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

jsfiddle

Verwenden Sie die .data()Methode:

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

Beachten Sie, dass dadurch kein tatsächliches data-infoAttribut erstellt wird. Wenn Sie das Attribut erstellen müssen, verwenden Sie .attr():

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

.data () von jQuery führt einige Aktionen aus, fügt die Daten jedoch nicht als Attribut zum DOM hinzu. Wenn Sie damit ein Datenattribut abrufen, erstellen Sie zunächst ein jQuery-Datenobjekt und setzen den Wert des Objekts auf das Datenattribut. Danach ist es im Wesentlichen vom Datenattribut entkoppelt.

Beispiel:

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

Wenn Sie den Wert des Attributs mit abrufen .data('foo'), wird erwartungsgemäß "bar" zurückgegeben. Wenn Sie dann das Attribut mit ändern .attr('data-foo', 'blah')und später verwenden .data('foo'), um den Wert abzurufen, wird "bar" zurückgegeben, obwohl das DOM dies sagt data-foo="blah". Wenn Sie .data()den Wert festlegen, wird der Wert im jQuery-Objekt geändert, nicht jedoch im DOM.

Grundsätzlich .data()dient zum Festlegen oder Überprüfen des Datenwerts des jQuery-Objekts. Wenn Sie es überprüfen und es noch nicht vorhanden ist, wird der Wert basierend auf dem Datenattribut im DOM erstellt. .attr()dient zum Festlegen oder Überprüfen des Attributwerts des DOM-Elements und berührt den jQuery-Datenwert nicht. Wenn Sie beide zum Ändern benötigen, sollten Sie beide .data()und verwenden .attr(). Ansonsten bleib bei dem einen oder anderen.

In JQuery werden " Daten " standardmäßig nicht aktualisiert :

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

Sie würden stattdessen " attr " für das Live-Update verwenden:

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

Mit using .data()werden nur Daten zum jQuery-Objekt für dieses Element hinzugefügt. Um die Informationen zum Element selbst hinzuzufügen, müssen Sie mit jQuery's .attroder native auf dieses Element zugreifen.setAttribute

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

Um auf ein Element mit dem Attributsatz zuzugreifen , können Sie einfach basierend auf diesem Attribut auswählen, wie Sie in Ihrem Beitrag ( $('div[data-info="1"]')) vermerken , aber wenn Sie es verwenden .data(), können Sie es nicht. Um basierend auf der .data()Einstellung auszuwählen , müssten Sie die Filterfunktion von jQuery verwenden.

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>

um den Text von a

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

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