web-dev-qa-db-fra.com

Comment obtenir, définir et sélectionner des éléments avec des attributs de données?

J'ai des problèmes avec les attributs de données, je ne peux rien faire fonctionner pour une raison quelconque, je dois donc faire quelque chose de mal:

Ensemble:

$('#element').data('data1', '1'); //Actually in my case the data is been added manually

Cela fait-il une différence?

Avoir:

$('#element').data('data1');

Sélectionner:

$('#element[data1 = 1]')

Rien de tout cela ne fonctionne pour moi, est-ce que je l'invente ou comment est-ce?

jqueryjquery-selectorscustom-data-attribute
25
Thaiscorpion

Toutes les réponses sont correctes, mais je veux dire quelque chose que personne d'autre n'a fait.
La méthode jQuery data agit comme un getter pour les attributs de données html5, mais le setter ne modifie pas l'attribut data- *.
Donc, si vous avez ajouté manuellement les données (comme indiqué dans votre commentaire), vous pouvez utiliser un sélecteur d'attribut css pour sélectionner votre élément:

$('#element[data-data1=1]')

mais si vous avez ajouté (modifié) les données via jQuery, la solution ci-dessus ne fonctionnera pas.
Voici un exemple de cet échec:

var div = $('<div />').data('key','value');
alert(div.data('key') == div.attr('data-key'));// it will be false

La solution consiste donc à filtrer la collection en vérifiant la valeur des données jQuery pour correspondre à celle souhaitée:

// replace key & value with own strings
$('selector').filter(function(i, el){
    return $(this).data('key') == 'value';
});

Ainsi, afin de surmonter ces problèmes, vous devez utiliser les attributs de l'ensemble de données html5 (via les méthos attr de jQuery) comme getters et setters:

$('selector').attr('data-' + key, value);

ou vous pouvez utiliser une expression personnalisée qui filtre jQuery interne data:

$.expr[':'].data = function(elem, index, m) {
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
    // Retrieve data key:
    key = regex.exec( m[0] )[2],
    // Retrieve data value to test against:
    val = regex.exec( m[0] );
    if (val) {
        val = val[2];
    }
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true:
    return val ? $(elem).data(key) == val : !!$(elem).data(key);
};

et l'utiliser comme:

$('selector:data(key,value)')
54
gion_13

Pour refléter les valeurs des attributs immédiatement dans le DOM, vous pouvez utiliser .attr()

$('#element').attr('data-data1', '1');  // Sets the attribute

$('#element[data-data1="1"]') // Selects the element with data-data1 attribute'

$('#element').data('data1'); // Gets the value  of the attribute

$('#element').attr('data-data1'); // Gets the value  of the attribute

En Javascript simple, vous pouvez essayer ceci

var elem = document.getElementById('element');

elem.setAttribute('data-data1', '1'); // Set the attribute

elem.getAttribute('data-data1'); // Gets the attribute
8
Sushanth --
// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');
5
micadelli

Vous utilisez le sélecteur d'ID, il n'est donc pas nécessaire d'utiliser le sélecteur d'attribut, car les données sont une propriété et vous les définissez à l'aide de la méthode data (pas la méthode attr) vous ne pouvez pas sélectionner l'élément en utilisant le sélecteur d'attribut, si vous souhaitez sélectionner l'élément uniquement s'il a data1 === 1 vous pouvez utiliser la méthode filter:

(function($){
    $(function(){
       // ...
       $('#element').filter(function() {
          return this.dataset.data1 == 1
          // return $(this).data('data1') == 1
       })
    })
})(jQuery);

dataset: permet d'accéder, en lecture et en écriture, à tous les attributs de données personnalisés (data- *) définis sur l'élément. Il s'agit d'une carte de DOMString, une entrée pour chaque attribut de données personnalisé.

1
undefined