Czy istnieje sposób, aby sprawdzić, czy istnieje atrybut danych?

Czy jest jakiś sposób na uruchomienie następujących czynności:

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

Tylko jeśli istnieje atrybut o nazwie data-timer na elemencie o identyfikatorze #dataTable?

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

UWAGA zwraca to tylko truewtedy, gdy atrybut danych nie jest pustym łańcuchem lub wartością „falsey”, np . 0Lub false.

Jeśli chcesz sprawdzić, czy istnieje atrybut danych, nawet jeśli jest pusty, wykonaj następujące czynności:

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

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

W celu dostarczenia innej odpowiedzi niż powyższe; możesz to sprawdzić w Object.hasOwnProperty(...)następujący sposób:

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

alternatywnie, jeśli masz wiele elementów danych, które chcesz iterować, możesz zmieniać .data() obiekt i iterować go w następujący sposób:

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

Nie mówię, że to rozwiązanie jest lepsze niż którekolwiek z pozostałych tutaj, ale przynajmniej jest to inne podejście ...

Lub połącz z waniliowym JS

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

Możesz użyć metody hasData jQuery.

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

Podstawową zaletą jQuery.hasData (element) jest to, że nie tworzy on obiektu danych i nie kojarzy go z elementem, jeśli żaden z nich obecnie nie istnieje. Natomiast jQuery.data (element) zawsze zwraca obiekt danych do obiektu wywołującego, tworząc go, jeśli wcześniej nie istniał żaden obiekt danych.

Spowoduje to jedynie sprawdzenie istnienia jakichkolwiek obiektów danych (lub zdarzeń) na twoim elemencie, nie będzie w stanie potwierdzić, czy konkretnie ma on obiekt „timera”.

Jeśli chcesz rozróżnić puste wartości od brakujących wartości, możesz użyć jQuery do sprawdzenia w ten sposób.

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

Więc z pierwotnego pytania zrobiłbyś to.

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

Możesz utworzyć niezwykle prostą wtyczkę jQuery, aby wysłać zapytanie do elementu w tym celu:

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

Następnie możesz po prostu użyć $("#dataTable").hasData('timer')

Gotchas:

• Zwróci falsetylko wtedy, gdy wartość nie istnieje (jest undefined); jeśli jest ustawiony na false/ null, hasData()nadal będzie wracał true.
• Różni się od wbudowanego, $.hasData()który sprawdza tylko, czy ustawione są jakieś dane elementu.

Przekonałem się, że działa to lepiej w przypadku dynamicznie ustawianych elementów danych:

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

Wszystkie odpowiedzi tutaj wykorzystują bibliotekę jQuery.

Ale javascript waniliowy jest bardzo prosty.

Jeśli chcesz uruchomić skrypt tylko wtedy, gdy element ze związkiem idz #dataTable również ma data-timeratrybut, a następnie kroki są następujące:

// Locate the element

const myElement = document.getElementById('dataTable');

// Run conditional code

if (myElement.dataset.hasOwnProperty('timer')) {

  [... CODE HERE...]

}

Moim zdaniem jest to najłatwiejsze rozwiązanie, aby wybrać cały element, który ma określony atrybut danych:

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

Oto zrzut ekranu, jak to działa.

Zła odpowiedź - patrz EDYCJA na końcu

Pozwól, że oprę się na odpowiedzi Alexa.

Aby zapobiec tworzeniu obiektu danych, jeśli nie istnieje, lepiej zrobić:

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

Następnie, $thisgdy nie utworzono żadnego obiektu danych, $.hasDatazwraca falsei nie zostanie wykonane $this.data(key).

EDYCJA: funkcja $.hasData(element)działa tylko wtedy, gdy dane zostały ustawione przy użyciu $.data(element, key, value), a nie element.data(key, value). Z tego powodu moja odpowiedź jest nieprawidłowa.

Potrzebowałem prostej boolean do pracy. Ponieważ jest niezdefiniowany jako nieobecny i nie fałszywy, używam !!do konwersji na boolean:

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

Alternatywnym rozwiązaniem byłoby użycie filtra:

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

Możesz to sprawdzić, wybierając atrybut css za pomocą

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

A co z:

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