Aggiunta dell'attributo di dati a DOM


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

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

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

Sto creando un elemento all'interno di jquery. Successivamente, voglio aggiungere "dati" di attributo. È come e viene aggiunto, ma nel DOM questo non è evidente e non riesco a ottenere l'oggetto utilizzando

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

jsfiddle

Risposte:


423

Usa il .data()metodo:

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

Si noti che ciò non crea un data-infoattributo reale . Se è necessario creare l'attributo, utilizzare .attr():

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

6
@Luntegg: utilizzare a .data()meno che non si disponga effettivamente di un motivo .attr().
Blender,

9
.data()non funziona. Non aggiunge l'attributo di dati a DOM e non ottengo elemento dall'attributo di dati.
Luntegg,

2
Deve anche essere una stringa - $ ('div'). Attr ('data-info', '' + info.id)
daviestar

1
sembra .data(key, val)che creerebbe l'attr. qualcuno sa perché non lo fa?
Luke W,

16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():Questa è stata la chiave del mio problema. Molte grazie.
Mikayil Abdullayev

28

.data () di jQuery fa un paio di cose ma non aggiunge i dati al DOM come attributo. Quando lo si utilizza per afferrare un attributo di dati, la prima cosa che fa è creare un oggetto di dati jQuery e impostare il valore dell'oggetto sull'attributo di dati. Successivamente, è essenzialmente disaccoppiato dall'attributo data.

Esempio:

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

Se hai afferrato il valore dell'attributo usando .data('foo'), restituirà "bar" come ti aspetteresti. Se quindi si modifica l'attributo utilizzando .attr('data-foo', 'blah')e successivamente si utilizza .data('foo')per afferrare il valore, restituirà "bar" anche se il DOM dice data-foo="blah". Se usi.data() per impostare il valore, cambierà il valore nell'oggetto jQuery ma non nel DOM.

Fondamentalmente, .data()è per l'impostazione o il controllo del valore dei dati dell'oggetto jQuery. Se lo stai verificando e non ne ha già uno, crea il valore in base all'attributo di dati presente nel DOM. .attr()serve per impostare o controllare il valore dell'attributo dell'elemento DOM e non toccherà il valore dei dati jQuery. Se hai bisogno di entrambi per cambiare, dovresti usare entrambi .data()e .attr(). Altrimenti, mantieni l'uno o l'altro.


14

in Jquery i " dati " non si aggiornano per impostazione predefinita:

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

Dovresti invece utilizzare " attr " per l'aggiornamento live:

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

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

3
Forse potresti spiegare cosa sta succedendo nel tuo codice, per aiutare gli altri.
Mohamad Shiralizadeh,

3

L'utilizzo .data()aggiungerà solo dati all'oggetto jQuery per quell'elemento. Per aggiungere le informazioni all'elemento stesso è necessario accedere a tale elemento utilizzando jQuery .attro nativo.setAttribute

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

Per accedere a un elemento con l'attributo impostato, puoi semplicemente selezionare in base a quell'attributo come annotato nel tuo post ( $('div[data-info="1"]')), ma quando lo usi .data()non puoi. Per selezionare in base .data()all'impostazione, è necessario utilizzare la funzione filtro di 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>


0

per ottenere il testo da a

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

uf = $("#selectestado option:selected").attr('data-sigla');
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.