Ajout d'un attribut de données au DOM

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

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

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

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

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

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>

pour obtenir le texte d'un

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

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