web-dev-qa-db-fra.com

Existe-t-il un moyen de vérifier si un attribut de données existe?

Existe-t-il un moyen de gérer les éléments suivants:

var data = $("#dataTable").data('timer');
var diffs = [];

for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));

Only s'il existe un attribut appelé data-timer sur l'élément avec un identifiant de #dataTable?

javascriptjquery
172
Angela
if ($("#dataTable").data('timer')) {
  ...
}

REMARQUE: ceci renvoie uniquement true si l'attribut de données n'est pas une chaîne vide ou une valeur "falsey", par ex. 0 ou false.

Si vous voulez vérifier l'existence de l'attribut data, même s'il est vide, procédez comme suit:

if (typeof $("#dataTable").data('timer') !== 'undefined') {
  ...
}
263
niiru
if (typeof $("#dataTable").data('timer') !== 'undefined')
{
    // your code here
}
106
Paul Fleming

Dans l’intérêt de fournir une réponse différente de celle indiquée ci-dessus; vous pouvez le vérifier avec Object.hasOwnProperty(...) comme ceci:

 if( $("#dataTable").data().hasOwnProperty("timer") ){
     // the data-time property exists, now do you business! .....
 }

alternativement, si vous souhaitez parcourir plusieurs éléments de données, vous pouvez modifier l'objet .data() et le parcourir comme suit:

 var objData = $("#dataTable").data();
 for ( data in objData ){
      if( data == 'timer' ){
            //...do the do
      }
 }

Ne pas dire que cette solution est meilleure que toutes les autres ici, mais au moins c'est une autre approche ...

35
sadmicrowave

Ou combinez avec un peu de vanille JS

if ($("#dataTable").get(0).hasAttribute("data-timer")) {
  ...
}
11
Max

Vous pouvez utiliser la méthode hasData de jQuery.

http://api.jquery.com/jQuery.hasData/

Le principal avantage de jQuery.hasData (element) est qu'il ne crée pas et n'associe pas d'objet de données à l'élément s'il n'en existe aucun. En revanche, jQuery.data (élément) renvoie toujours un objet de données à l'appelant, en créant un si aucun objet de données n'existait auparavant.

Cela ne fera que vérifier l'existence d'objets de données (ou d'événements) sur votre élément, il ne sera pas en mesure de confirmer s'il contient spécifiquement un objet "timer".

10
BZink

Si vous voulez faire la distinction entre les valeurs vides et les valeurs manquantes, vous pouvez utiliser jQuery pour le vérifier.

<div id="element" data-foo="bar" data-empty=""></div>

<script>
"foo" in $('#element').data(); // true
"empty" in $('#element').data(); // true
"other" in $('#element').data(); // false
</script>

Donc, à partir de la question initiale, vous feriez ceci.

if("timer" in $("#dataTable").data()) {
  // code
}
9
Ryan

Vous pouvez créer un plugin jQuery extrêmement simple pour interroger un élément à cet effet:

$.fn.hasData = function(key) {
  return (typeof $(this).data(key) != 'undefined');
};

Ensuite, vous pouvez simplement utiliser $("#dataTable").hasData('timer')

Gotchas:

  • Renverra false uniquement si la valeur n'existe pas (is undefined); s'il est réglé sur false/null il hasData() retournera toujours true.
  • Il diffère de la $.hasData() intégrée qui vérifie uniquement si toutes les données de l'élément sont définies.
7
Alex

J'ai trouvé que cela fonctionnait mieux avec des éléments de données définis de manière dynamique:

if ($("#myelement").data('myfield')) {
  ...
}
3
JerSchneid

Mauvaise réponse - voir EDIT à la fin

Permettez-moi de développer la réponse d'Alex.

Pour empêcher la création d'un objet de données s'il n'existe pas, je ferais mieux de faire:

$.fn.hasData = function(key) {
    var $this = $(this);
    return $.hasData($this) && typeof $this.data(key) !== 'undefined';
};

Ensuite, où $this n'a pas d'objet de données créé, $.hasData renvoie false et il n'exécutera pas $this.data(key).

EDIT: La fonction $.hasData(element) ne fonctionne que si les données ont été définies à l'aide de $.data(element, key, value) et non pas element.data(key, value). Pour cette raison, ma réponse n'est pas correcte.

1
nestorrente

Ceci est la solution la plus simple à mon avis est de sélectionner tous les éléments ayant certains attributs de données:

var data = $("#dataTable[data-timer]");
var diffs = [];

for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));

Voici la capture d'écran de la façon dont cela fonctionne.

console log of the jquery selector

1
Animesh Singh

Il me fallait un simple booléen. Comme il est indéfini de non présent et non faux, j'utilise le !! pour convertir en booléen:

var hasTimer = !!$("#dataTable").data('timer');
if( hasTimer ){ /* ....... */ }

Une autre solution serait d'utiliser un filtre:

if( $("#dataTable").filter('[data-timer]').length!==0) { /* ....... */ }
1
Martijn

Vous pouvez vérifier par sélection d'attribut css avec

if ($('#dataTable').is('[data-timer]')) {
   // data-timer attribute exists
}
0
acme

Et à propos de:

if ($('#dataTable[data-timer]').length > 0) {
    // logic here
}
0
dani24
var data = $("#dataTable").data('timer');
var diffs = [];

if( data.length > 0 ) {
for(var i = 0; i + 1 < data.length; i++) {
    diffs[i] = data[i + 1] - data[i];
}

alert(diffs.join(', '));
}
0
Luceos