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

Existe-t-il un moyen d'exécuter ce qui suit:

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(', '));

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

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

REMARQUE ceci ne renvoie que truesi l'attribut de données n'est pas une chaîne vide ou une valeur "falsey", par exemple 0ou false.

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

if (typeof $("#dataTable").data('timer') !== 'undefined') {
  ...
}

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

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

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

Sinon, si vous avez plusieurs éléments de données que vous souhaitez parcourir, vous pouvez faire varier l' .data()objet et le parcourir comme ceci:

 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 ...

Ou combiner avec un peu de vanille JS

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

Vous pouvez utiliser la méthode hasData de jQuery.

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

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

Cela vérifiera uniquement l'existence de tous les objets de données (ou événements) sur votre élément, il ne pourra pas confirmer s'il a spécifiquement un objet "timer".

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

<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 cela.

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

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

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

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

Gotchas:

• Ne retournera falseque si la valeur n'existe pas (est undefined); s'il est défini sur false/, nullil hasData()reviendra toujours true.
• Il est différent de celui intégré $.hasData()qui vérifie uniquement si des données sur l'élément sont définies.

Toutes les réponses ici utilisent la bibliothèque jQuery.

Mais le javascript vanille est très simple.

Si vous voulez exécuter un script que si l'élément avec un idde #dataTable aussi a un data-timerattribut, les étapes sont les suivantes:

// Locate the element
const myElement = document.getElementById('dataTable');

// Run conditional code
if (myElement.dataset.hasOwnProperty('timer')) {

  [... CODE HERE...]

}

J'ai trouvé que cela fonctionne mieux avec des éléments de données définis dynamiquement:

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

C'est la solution la plus simple à mon avis est de sélectionner tous les éléments qui ont 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 son fonctionnement.

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ù $thisaucun objet de données n'a été créé, $.hasDataretourne falseet il ne s'exécutera pas $this.data(key).

EDIT: la fonction $.hasData(element)ne fonctionne que si les données ont été définies en utilisant $.data(element, key, value), pas element.data(key, value). Pour cette raison, ma réponse n'est pas correcte.

J'avais besoin d'un simple booléen pour travailler. Parce qu'il est indéfini ou non présent et non faux, j'utilise !!pour convertir en booléen:

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

Une solution alternative consisterait à utiliser le filtre:

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

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(', '));
}

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

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

Et à propos de:

if ($('#dataTable[data-timer]').length > 0) {
    // logic here
}