有没有一种方法可以检查数据属性是否存在?

2020/10/18 21:01 · javascript ·  · 0评论

有什么办法可以运行以下命令:

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的属性时?

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

注意:仅true当data属性不是空字符串或“ false”值(例如0或)时,此方法才返回false

如果要检查数据属性是否存在(即使为空),请执行以下操作:

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

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

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

或结合一些香草JS

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

您可以使用jQuery的hasData方法。

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

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

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

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

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

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

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

陷阱:

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

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

但是香草javascript非常简单。

如果您只想在带有的元素具有属性的情况id运行脚本,则步骤如下:#dataTable data-timer

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

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

  [... CODE HERE...]

}

我发现这对于动态设置数据元素更好:

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

我认为这是最简单的解决方案,就是选择所有具有特定数据属性的元素:

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选择器的控制台日志

答案错误-参见最后的编辑

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

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

$.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)因此,我的答案不正确。

我需要一个简单的布尔值来使用。因为它是不确定的,不存在,也不是假,所以我使用将!!转换为布尔值:

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

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

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

您可以使用以下命令检查CSS属性选择

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

然后呢:

if ($('#dataTable[data-timer]').length > 0) {
    // logic here
}
本文地址:http://javascript.askforanswer.com/youmeiyouyizhongfangfakeyijianchashujushuxingshifoucunzai.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!