Ajout d'un attribut de données au DOM


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

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

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

Je crée un élément dans jquery. Après cela, je veux ajouter l'attribut "data". Il est comme et est ajouté, mais dans le DOM, ce n'est pas apparent, et je ne peux pas obtenir l'élément, en utilisant

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

jsfiddle

Réponses:


423

Utilisez la .data()méthode:

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

Notez que cela ne crée pas d' data-infoattribut réel . Si vous devez créer l'attribut, utilisez .attr():

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

6
@Luntegg: à utiliser .data()sauf si vous avez réellement une raison de l'utiliser .attr().
Blender

9
.data()ne marche pas. Il n'ajoute pas d'attribut de données au DOM, et je n'obtiens pas élément par attribut de données.
Luntegg

2
Il doit également s'agir d'une chaîne - $ ('div'). Attr ('data-info', '' + info.id)
daviestar

1
semble .data(key, val)créer l'attr. quelqu'un sait pourquoi il ne le fait pas?
Luke W

16
Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():C'était la clé de mon problème. Merci beaucoup.
Mikayil Abdullayev

28

.data () de jQuery fait plusieurs choses mais n'ajoute pas les données au DOM en tant qu'attribut. Lorsque vous l'utilisez pour récupérer un attribut de données, la première chose à faire est de créer un objet de données jQuery et de définir la valeur de l'objet sur l'attribut de données. Après cela, il est essentiellement découplé de l'attribut data.

Exemple:

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

Si vous saisissez la valeur de l'attribut en utilisant .data('foo'), il renverra "bar" comme vous vous en doutez. Si vous modifiez ensuite l'attribut en utilisant .attr('data-foo', 'blah'), puis utilisez plus tard .data('foo')pour saisir la valeur, il renverra "bar" même si le DOM dit data-foo="blah". Si vous utilisez .data()pour définir la valeur, cela changera la valeur dans l'objet jQuery mais pas dans le DOM.

Fondamentalement, il .data()sert à définir ou à vérifier la valeur de données de l'objet jQuery. Si vous le vérifiez et qu'il n'en a pas déjà un, il crée la valeur basée sur l'attribut de données qui se trouve dans le DOM. .attr()est pour définir ou vérifier la valeur d'attribut de l'élément DOM et ne touchera pas la valeur des données jQuery. Si vous avez besoin des deux pour changer, vous devez utiliser à la fois .data()et .attr(). Sinon, restez avec l'un ou l'autre.


14

dans Jquery, les " données " ne s'actualisent pas par défaut:

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

Vous utiliseriez plutôt " attr " pour la mise à jour en direct:

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
Peut-être pourriez-vous expliquer ce qui se passe dans votre code, pour aider les autres.
Mohamad Shiralizadeh

3

L'utilisation .data()ajoutera uniquement des données à l'objet jQuery pour cet élément. Afin d'ajouter les informations à l'élément lui-même, vous devez accéder à cet élément en utilisant jQuery .attrou native.setAttribute

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

Pour accéder à un élément avec l'ensemble d'attributs, vous pouvez simplement sélectionner en fonction de cet attribut comme vous le notez dans votre message ( $('div[data-info="1"]')), mais lorsque vous l'utilisez, .data()vous ne pouvez pas. Afin de sélectionner en fonction du .data()paramètre, vous devez utiliser la fonction de filtre de 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

pour obtenir le texte d'un

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

uf = $("#selectestado option:selected").attr('data-sigla');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.