Hinzufügen eines Datenattributs zu DOM

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

Luntegg
quelle

Antworten:

423

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');
Mixer
quelle
6
@Luntegg: Verwenden .data()Sie, es sei denn, Sie haben tatsächlich einen Grund zur Verwendung .attr().
Blender
9
.data()arbeite nicht Es fügt DOM kein
Datenattribut hinzu
2
Es muss auch eine Zeichenfolge sein - $ ('div'). Attr ('data-info', '' + info.id)
daviestar
1
scheint wie .data(key, val)würde das attr erstellen. weiß jemand warum es nicht?
Luke W
16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():Dies war der Schlüssel zu meinem Problem. Vielen Dank.
Mikayil Abdullayev
28

.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.

Brendon Shih
quelle
14

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());
diego matos - keke
quelle
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
quelle
3
Vielleicht könnten Sie erklären, was in Ihrem Code vor sich geht, um anderen zu helfen.
Mohamad Shiralizadeh
3

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>

Travis J.
quelle
0

um den Text von a

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

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