Чи можна перевірити, чи існує атрибут даних?


190

Чи я можу виконати наступне:

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

Тільки якщо на елементі з ідентифікатором #dataTable є атрибут з назвою таймер даних?


Одне застереження, про яке слід пам’ятати, - це те, що іноді нічого не буде збережено в data-атрибуті, але будуть дані, що зберігаються у jQuery і навпаки.
Алекс Ш

Відповіді:


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

ПРИМІТКА це повертається лише в тому trueвипадку, якщо атрибут даних не є порожнім рядком або значенням "falsey", наприклад, 0або false.

Якщо ви хочете перевірити наявність атрибуту даних, навіть якщо він порожній, зробіть це:

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

35
Інший варіант для вас: if ($("#dataTable[data-timer]").length) { ... }.
VisioN

101
Будь обережний! Це відповідає дійсності лише тоді, коли таймер даних має значення. Якщо він присутній, але порожній, він поверне помилковий.
Конг

15
Kong має рацію, якщо у вас є порожнє значення, який не працює. Використовуйте це замість: if (typeof $ ("# dataTable"). Attr ("таймер даних") == "undefined") {...}
PierrickM

22
Ще одна версія , яка дає реальну булево для вашого умовно: if ( $("#dataTable").is("[data-timer]") ) { ... }. Це також корисніше, якщо ви вже маєте посилання на таблицю в іншому об’єкті jQuery.
Нойо

10
Він поверне помилковим, якщо значення існує і дорівнює 0. Це химерно.
Герман

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

@VisioN отказоустойчивого поєднання вашого і PierrickM коментаря користувача на цьому відповідь: if (typeof $('#dataTable').data('timer') !== 'undefined') ....
WynandB

3
@Wynand. Оновлено, щоб відобразити ваш коментар та коментар VisioN.
Пол Флемінг

1
@flem Вам також потрібно додати typeofчек
Брендан Буллен

1
@flem, @VisioN, ваші підходи провалюються у випадку, коли немає атрибуту даних, але дані все-таки встановлені методом .data (), наприклад $('#dataTable').data('timer', Date.now()). Здається, ОП хоче перевірити, чи є фактичний атрибут даних. Рішення @ niiru (або те, що ви запропонуєте в коментарі до цього рішення), в цьому випадку краще.
Нойо

1
@VisioN Для мене йдеться про undefinedпослідовну перевірку . Ми знаємо , чому typeofвикористовуються для перевірки undefinedв деяких випадках, але я знаходжу це помилка , щоб побачити , що перевіряється з typeof в одному місці і НЕ в іншому. Крім того, це не схоже на використання typeofдодає багато більш складний код. Це може бути більш явним, можливо, надлишковим, але ледве надскладним. Я бачу вашу думку, але я б сказав, що не використовувати це було б надмірним спрощенням. ;]
WynandB

38

В інтересах надання відповіді, відмінної від наведеної вище; ви можете це перевірити Object.hasOwnProperty(...)так:

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

альтернативно, якщо у вас є кілька елементів даних, які ви хочете повторити, ви можете змінити .data()об'єкт і повторити його так:

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

Не кажучи, що це рішення краще, ніж будь-яке інше, але тут, принаймні, це інший підхід ...


9
Це цікаво, але слід зазначити, що якщо у вас є атрибут, data-foo-barто ваш чек повинен бути .data().hasOwnProperty("fooBar"), а не.data().hasOwnProperty("foo-bar")
dgmstuart

Цікаво в цьому випадку з валідатором javascript. Typeof повернувся невизначеним, але це спрацювало!
Річард Хоусем

12

Або поєднати з ванільним JS

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

Мені це подобається. Однак ви створюєте дані, використовуючи jQuery, використовуючи data()замість attr(), атрибут не знайде :(
Sam

10

Можна використовувати метод hasData jQuery.

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

Основна перевага jQuery.hasData (елемента) полягає в тому, що він не створює і не пов'язує об'єкт даних з елементом, якщо в даний час його немає. Навпаки, jQuery.data (елемент) завжди повертає об'єкт даних абоненту, створюючи його, якщо жодного об'єкта даних раніше не існувало.

Це лише перевірить наявність будь-яких об’єктів даних (або подій) на вашому елементі, він не зможе підтвердити, якщо в ньому конкретно є об’єкт «таймер».


10

Якщо ви хочете розрізнити порожні значення та відсутні значення, скористайтеся jQuery, щоб перевірити так.

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

Тож із оригінального питання ви б це зробили.

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

7

Ви можете створити надзвичайно простий плагін jQuery для запиту елемента для цього:

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

Тоді ви можете просто використовувати $("#dataTable").hasData('timer')

Отримав:

  • Повернеться falseлише у тому випадку, якщо значення не існує (є undefined); якщо він встановлений в false/ nullвона hasData()буде повертати true.
  • Він відрізняється від вбудованого, $.hasData()який перевіряє, чи встановлені якісь дані про елемент.

3

Я виявив, що це працює краще з динамічно заданими елементами даних:

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

3

У всіх відповідях тут використовується бібліотека jQuery.

Але ванільний javascript дуже простий.

Якщо ви хочете запустити скрипт тільки якщо елемент з idз #dataTable також має data-timerатрибут, то кроки полягають в наступному:

// Locate the element

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

// Run conditional code

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

  [... CODE HERE...]

}

2

На мою думку, це найпростіший варіант вирішення питання - виділити весь елемент, який має певний атрибут даних:

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

Ось скріншот того, як це працює.

консольний журнал селектора jquery


1

Неправильна відповідь - дивіться редагувати наприкінці

Дозвольте мені спиратися на відповідь Алекса.

Щоб запобігти створенню об'єкта даних, якщо його не існує, я б краще:

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

Тоді, де $thisне створено жодного об’єкта даних, $.hasDataповертається falseі він не буде виконуватись $this.data(key).

EDIT: функція $.hasData(element)працює лише в тому випадку, якщо дані були встановлені за допомогою $.data(element, key, value), а не element.data(key, value). Через це моя відповідь не вірна.


1

Мені потрібна була проста булева робота. Оскільки це не визначено, немає і не є помилковим, я використовую !!перетворення на булевий:

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

Альтернативним рішенням буде використання фільтра:

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

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

Якщо .data('timer')не визначено, ви отримаєте TypeError: $ (...). Дані (...) не визначено під час перевірки data.length. Це, швидше за все, є основою питання ОП, тобто переконання, що можна сміливо перевіряти в data.lengthіншому місці. Крім того, ви не обов'язково зможете точно сказати, чи dataце рядок, масив чи об'єкт, останній може або не може містити lengthяк визначене властивість.
WynandB

Так, моя відповідь потребує перегляду. Написано в 2012 році. Але переписувати це було б марно, оскільки відповідь вже дано.
Luceos

0

Ви можете перевірити вибір атрибутів css за допомогою

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

3
Значення даних не завжди зберігаються як атрибути DOM. Коли ви змінюєте значення даних за допомогою jQuery за допомогою $ .data, він встановлює його як властивість елемента.
qwerty

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.