web-dev-qa-db-fra.com

Ajout d'attribut de données à 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 évident, et je ne peux pas obtenir l'article, en utilisant

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

jsfiddle

jqueryhtml5custom-data-attribute
148
Luntegg

Utilisez la méthode .data():

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

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

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

la fonction .data () de jQuery fait plusieurs choses, mais n'ajoute pas les données au DOM en tant qu'attribut. Lors de son utilisation pour saisir 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 cet 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 à l'aide de .data('foo'), il renverra "bar" comme vous le souhaitiez. Si vous modifiez ensuite l'attribut à l'aide de .attr('data-foo', 'blah'), puis que vous utilisez ultérieurement .data('foo') pour saisir la valeur, la valeur renvoyée sera "bar" même si le DOM indique data-foo="blah". Si vous utilisez .data() pour définir la valeur, la valeur sera modifiée dans l'objet jQuery mais pas dans le DOM.

Fondamentalement, .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 en fonction de l'attribut de données contenu dans le DOM. .attr() sert à définir ou à vérifier la valeur d'attribut de l'élément DOM et ne touchera pas la valeur de données jQuery. Si vous avez besoin que les deux changent, vous devez utiliser à la fois .data() et .attr(). Sinon, restez avec l'un ou l'autre.

26
Brendon Shih

dans Jquery "data" 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 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());
13
diego matos - keke
 $(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

L'utilisation de .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 à l'aide de _.attr_ ou de _.setAttribute_ de jQuery.

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

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

pour obtenir le texte d'un

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

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