有没有办法可以检查数据属性是否存在？

Question

有什么方法可以运行以下内容:

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

只有在id为#dataTable的元素上有一个名为data-timer的属性？

Answer 1

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

注意这仅true在data属性不是空字符串或"falsey"值时返回,例如0或false.

如果要检查data属性是否存在,即使为空,也要执行以下操作:

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

Answer 2

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

Answer 3

为了提供与上述不同的答案; 你可以这样检查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
      }
 }

不是说这个解决方案比这里的任何其他解决方案更好,但至少它是另一种方法......

Answer 4

或者与一些香草JS结合使用

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

Answer 5

您可以使用jQuery的hasData方法.

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

jQuery.hasData(element)的主要优点是,如果当前不存在,它不会创建数据对象并将其与元素关联.相反,jQuery.data(element)总是将一个数据对象返回给调用者,如果以前没有数据对象,则创建一个数据对象.

这将仅检查元素上是否存在任何数据对象(或事件),它将无法确认它是否具有"计时器"对象.

Answer 6

如果要区分空值和缺失值,可以使用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
}

Answer 7

这里的所有答案都使用 jQuery 库。

但是香草 javascript 非常简单。

如果你想只在带有idof的元素#dataTable 也有data-timer属性的情况下运行脚本，那么步骤如下：

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

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

  [... CODE HERE...]

}

Answer 8

您可以创建一个非常简单的jQuery插件来查询元素:

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

然后你可以简单地使用 $("#dataTable").hasData('timer')

陷阱:

• false仅当值不存在时才会返回(是undefined); 如果设置为false/ null它hasData()仍然会返回true.
• 它与内置程序不同,内置程序$.hasData()仅检查是否设置了元素上的任何数据.