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

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')) {
  ...
}

注意，如果data属性不是空字符串或“falsey”值，则仅返回true。 0或false。

如果要检查数据属性是否存在，即使为空，也请执行以下操作：

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

您可以使用jQuery的hasData方法。

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

  

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

这将仅检查元素上是否存在任何数据对象（或事件），它将无法确认它是否具有“计时器”对象。

Answer 5

或与一些香草JS结合

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

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插件来查询元素：

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

然后您只需使用$("#dataTable").hasData('timer')

即可

陷阱：

• 仅当值不存在时才会返回false（undefined};如果设置为false / null，则hasData()仍会返回true。
• 与内置$.hasData()不同，内置{{1}}仅检查是否设置了元素上的任何数据。

Answer 8

我发现动态设置数据元素的效果更好：

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

Answer 9

错误答案 - 请参阅最后的编辑

让我以Alex的答案为基础。

如果数据对象不存在，为了防止创建数据对象，我最好这样做：

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

然后，如果$this没有创建数据对象，$.hasData会返回false，并且不会执行$this.data(key)。

编辑：$.hasData(element)功能仅在使用$.data(element, key, value)而非element.data(key, value)设置数据时才有效。因此，我的答案不正确。

Answer 10

我需要一个简单的布尔值来使用。因为它未定义不存在，而不是假，我使用!!转换为布尔值：

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

另一种解决方案是使用过滤器：

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

Answer 11

在我看来，这是最简单的解决方案是选择具有特定数据属性的所有元素：

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

以下是其工作原理的截图。

Answer 12

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

但是香草javascript非常简单。

如果仅当id为#dataTable 的元素具有data-timer属性时才运行脚本，则步骤如下：

// Locate the element

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

// Run conditional code

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

  [... CODE HERE...]

}

Answer 13

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

Answer 14

您可以通过

选择css属性进行检查

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

Answer 15

那怎么样：

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