Ajout d'un attribut de données au DOM

Question

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

Answer 1

Utilisez le .data() método:

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

Notez que cela ne crée pas un véritable data-info attribut. Si vous devez créer l'attribut, utilisez .attr() :

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

Answer 2

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

Exemple :

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

Si vous avez saisi la valeur de l'attribut à l'aide de la fonction .data('foo') il renvoie "bar", comme vous vous y attendez. Si vous modifiez ensuite l'attribut en utilisant .attr('data-foo', 'blah') puis, plus tard, utiliser .data('foo') pour récupérer la valeur, il renverrait "bar" même si le DOM dit que 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.

En gros, .data() sert à définir ou à vérifier la valeur des données de l'objet jQuery. Si vous le vérifiez et qu'il n'en a pas encore, il crée la valeur en se basant sur l'attribut data qui se trouve dans le DOM. .attr() sert à définir ou à vérifier la valeur de l'attribut de l'élément DOM et ne touchera pas la valeur des données jQuery. Si vous avez besoin qu'elles changent toutes les deux, vous devez utiliser les deux méthodes suivantes .data() y .attr() . Sinon, restez-en à l'un ou l'autre.

Answer 3

Dans Jquery " données "ne s'actualise pas par défaut :

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

Vous utiliseriez " attr "pour une mise à jour en direct :

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

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

Answer 5

Utilisation de .data() ajoutera uniquement des données à l'objet jQuery de cet élément. Pour ajouter les informations à l'élément lui-même, vous devez accéder à cet élément à l'aide de la fonction .attr ou natif .setAttribute

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

Afin de accès un élément avec l'attribut défini, vous pouvez simplement sélectionner sur la base de cet attribut comme vous le notez dans votre message ( $('div[data-info="1"]') ), mais lorsque vous utilisez .data() vous ne pouvez pas. Afin de sélectionner sur la base du .data() 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>