jQuery: Lire et Modifier les Valeurs d'Attributs Data

Dans ce tutoriel, je voudrais vous montrer comment lire et modifier les valeurs d'attribut data des éléments HTML arbitraires à l'aide de JavaScript et jQuery.

J'ai divisé le tutoriel en les sections suivantes:

• Comment lire les Valeurs d'Attribut Data
• Comment écrire des Valeurs d'Attribut Data
• Comment lire et écrire tous les Attributs

Comme exemple, nous aimerions utiliser le HTML suivant:

<div id="mydiv" data-a="1" data-b="2"></div>

Comme vous pouvez le voir, il s'agit d'un élément DIV avec l'ID "mydiv" ayant attribué 2 attributs data. En détail, c'est l'attribut "data-a" avec la valeur 1 et "data-b" avec la valeur 2.

Comment lire les Valeurs d'Attribut Data

Pour lire les attributs data, jQuery nous aide à offrir la méthode .data(). Jetons un coup d'œil à un exemple:

var a = $("#mydiv").data("a");
var b = $("#mydiv").data("b");

var c = a + b;

alert(c);

Ici, nous lisons les deux attributs data de l'élément DIV, nous résumons les valeurs et montrons une alerte contenant le résultat.

Concrètement, nous utilisons le sélecteur $("#mydiv") afin de sélectionner le élément DIV. Ensuite, nous utilisons .data("a") et .data("b") pour obtenir les valeurs des attributs. Nous les stockons dans les variables a et b, nous gardons la somme en variable c et sortie c avec alert().

Comme vous pouvez le voir, lorsque vous utilisez .data(), nous n'avons pas à écrire "data-a" ou "data-b". Il suffit d'écrire "a" et "b" pour accéder aux valeurs.

Comment écrire des Valeurs d'Attribut Data

Lorsque nous passons un deuxième paramètre à .data(), ce paramètre est écrit à l'attribut data correspondant. Voici un petit exemple:

var a_new = 10;

$("#mydiv").data("a", a_new);
$("#mydiv").data("b", "test");

Encore une fois, nous utilisons le sélecteur $("#mydiv") afin de sélectionner le DIV. Après cela, nous définissons l'attribut data "a" sur une variable que nous avons définie auparavant et nous définissons "b" sur une chaîne que nous avons spécifié directement. En faisant cela, nous obtenons le résultat suivant:

<div id="mydiv" data-a="10" data-b="test"></div>

Comment lire et écrire tous les Attributs

En tant que classification et petite digression, il ne devrait pas être sans mention à ce stade, comment nous pouvons lire et écrire d'autres attributs, par exemple des attributs qui ne commencent pas par le préfixe "data-".

Pour ces attributs, nous pouvons utiliser la méthode .attr(). La fonctionnalité est comparable à celle de .data():

// lire
var id = $("#mydiv").attr("id");
var a  = $("#mydiv").attr("data-a");

// écrire
$("#mydiv").attr("id", "new_id");
$("#mydiv").attr("data-a", 10);

Ici, nous lisons la valeur de l'ID de notre élément DIV et plus tard, nous modifions cette valeur en "new_id". Si nous voulons accéder aux attributs data à l'aide de .attr(), nous devons maintenant utiliser le nom complet, dans notre exemple "data-a" au lieu de "a" comme utilisé avec .data().