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

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在数据属性不是空字符串或“假”值（例如0or ）时返回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

或者结合一些香草JS

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

Answer 5

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

您可以使用 jQuery 的 hasData 方法。

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

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

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

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仅当值不存在时才会返回(is undefined)；如果它设置为false/null它hasData()仍然会返回true。
• $.hasData()它与仅检查元素上是否设置了任何数据的内置不同。

Answer 9

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

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

Answer 10

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

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 11

您可以通过 css 属性选择进行检查

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

Answer 12

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

让我以亚历克斯的回答为基础。

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

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

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

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

Answer 13

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

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

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

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

Answer 14

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 15

那么：

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