webentwicklung-frage-antwort-db.com.de

Datenattribut zu DOM hinzufügen

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

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

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

Ich erstelle 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

148
Luntegg

Verwenden Sie die .data() -Methode:

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

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

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

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, wird zunächst ein jQuery-Datenobjekt erstellt und der Wert des Objekts auf das Datenattribut festgelegt. Danach ist es im Wesentlichen vom Datenattribut entkoppelt.

Beispiel:

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

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

Grundsätzlich dient .data() zum Festlegen oder Überprüfen des Datenwerts des jQuery-Objekts. Wenn Sie es überprüfen und noch keines haben, erstellt es den Wert basierend auf dem Datenattribut, das sich im DOM befindet. .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 sowohl .data() als auch .attr() verwenden. Ansonsten bleib bei dem einen oder anderen.

26
Brendon Shih

in JQuery wird "data" 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());
13
 $(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);
4
DrMabuse

Mit .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 jQueries .attr Oder native .setAttribute Auf dieses Element zugreifen.

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

Um access ein Element mit dem Attribut-Set auszuwählen, können Sie einfach basierend auf diesem Attribut auswählen, wie Sie es in Ihrem Beitrag notiert haben ($('div[data-info="1"]')), aber wenn Sie .data() kannst du nicht. Um basierend auf der Einstellung .data() 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>
3
Travis J

um den Text von a

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

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