Comment obtenir l'attribut data-id?


813

J'utilise le plugin jQuery quicksand. J'ai besoin d'obtenir l'ID de données de l'élément cliqué et de le transmettre à un service Web. Comment obtenir l'attribut data-id? J'utilise la .on()méthode pour lier à nouveau l'événement click pour les éléments triés.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>


57
Avis aux nouveaux visiteurs: la méthode .live () de JQuery a été déconseillée au profit de .on ()
dendini

3
Vous devez supprimer le # de l'alerte, vous n'en avez pas besoin :-)
Becs Carter

attr ("# data-id")) est incorrect. corrigé: attr ("data-id"));
guido _nhcol.com.br_

@BruceAdams, il peut être utile de modifier la question pour utiliser la on()méthode telle qu'elle live()est désormais déconseillée, et cette question reçoit un certain nombre de visiteurs.
Rory McCrossan

Réponses:


1637

Pour obtenir le contenu de l'attribut data-id(comme dans <a data-id="123">link</a>), vous devez utiliser

$(this).attr("data-id") // will return the string "123"

ou .data()(si vous utilisez une nouvelle jQuery> = 1.4.3)

$(this).data("id") // will return the number 123

et la partie après data-doit être en minuscule, par exemple data-idNumne fonctionnera pas, mais le data-idnumfera.


7
J'ai dû utiliser attr()car jQuery supprimait les zéros de tête des codes postaux à l'aide de data()TFM, "à partir de jQuery 1.4.3 HTML 5, les attributs de données seront automatiquement extraits dans l'objet de données de jQuery. ... Chaque tentative est faite pour convertir la chaîne en une valeur JavaScript (cela inclut les booléens, les nombres, les objets, les tableaux et null). Une valeur n'est convertie en nombre que si cela ne change pas la représentation de la valeur. Par exemple, "1E02" et "100.000" sont équivalents sous forme de nombres (valeur numérique 100), mais leur conversion modifierait leur représentation afin qu'ils soient laissés sous forme de chaînes. "
Wesley Murch

43
Cela revient «indéfini» pour moi.
Forever

4
Bien que cela soit évident pour certains, je pense que cela vaut la peine de noter pour ceux qui ont eu des problèmes avec cela que lorsque vous utilisez .attr (), le texte à l'intérieur des crochets doit correspondre à tout ce que vous avez défini comme attribut de données personnalisé. Par exemple, si l'attribut de données personnalisé est volume de données , vous devez le référencer en utilisant .attr ("volume de données") . Et, avec jQuery 1.4.3 vers le haut et en utilisant .data (), le texte à l'intérieur des crochets doit correspondre à votre attribut de données personnalisé sans le préfixe de données . Par exemple, si l'attribut de données personnalisé est un volume de données , vous devez le référencer en utilisant .data ("volume") .
Luke

111
Pour ceux qui signalent que cela ne fonctionne pas, assurez-vous que votre attribut ne contient que des lettres minuscules. Par exemple, "data-listId" devrait être "data-listid". Voir stackoverflow.com/questions/10992984/… pour la raison.
WindChimes

2
ou$(this).data().id //returns 123
Dem Pilafian

170

Si nous voulons récupérer ou mettre à jour ces attributs à l'aide de JavaScript natif existant, nous pouvons le faire en utilisant les méthodes getAttribute et setAttribute comme indiqué ci-dessous:

Via JavaScript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Grâce à jQuery

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

Lisez cette documentation


90

Note importante. Gardez à l'esprit que si vous ajustez l' data- attribut dynamiquement via JavaScript, il ne sera PAS reflété dans la data()fonction jQuery. Vous devez également l'ajuster via la data()fonction.

<a data-id="123">link</a>

js:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

Bon point ... y a-t-il un data (). Refresh pour rafraîchir les données des attributs?
Harag

1
C'est un point important pour changer et accéder dynamiquement à la valeur de l'attribut de données.
Motahar Hossain

56

Si vous n'êtes pas préoccupé par les anciens navigateurs IE, vous pouvez également utiliser l' API de jeu de données HTML5

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

JS

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

Démo: http://html5demos.com/dataset

Liste complète de prise en charge du navigateur: http://caniuse.com/#feat=dataset


19

Surpris, personne n'a mentionné:

<select id="selectVehicle">
     <option value="1" data-year="2011">Mazda</option>
     <option value="2" data-year="2015">Honda</option>
     <option value="3" data-year="2008">Mercedes</option>
     <option value="4" data-year="2005">Toyota</option>
    </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Voici l'exemple de travail: https://jsfiddle.net/ed5axgvk/1/


2
Très belle réponse. Merci beaucoup.
Ruberandinda Patience

13

HTML

<span id="spanTest" data-value="50">test</span>

JS

$(this).data().value;

ou

$("span#spanTest").data().value;

ANS: 50

Travaille pour moi!




11

Accéder à l'attribut de données avec le sien idest un peu facile pour moi.

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>


7

Ce morceau de code renverra la valeur des attributs de données, par exemple: data-id, data-time, data-name etc., je l'ai montré pour l'id

<a href="#" id="click-demo" data-id="a1">Click</a>

js:

$(this).data("id");

// récupère la valeur du data-id -> a1

$(this).data("id", "a2");

// cela changera l'ID de données -> a2

$(this).data("id");

// récupère la valeur du data-id -> a2


4

en utilisant jQuery:

  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });


0

J'ai une envergure. Je veux prendre la valeur de l'attribut data-txt-lang, qui est utilisé défini.

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

0

Le problème est que vous ne spécifiez pas l'option ou l'option sélectionnée de liste déroulante ou de liste, voici un exemple de liste déroulante, je suppose un enregistrement de données d'attribut de données.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.