데이터 속성이 존재하는지 확인할 수있는 방법이 있습니까?

다음을 실행할 수있는 방법이 있습니까?

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데이터 속성이 빈 문자열 또는 "falsey"값이 아닌 경우 에만 반환 합니다 (예 : 0또는) false.

비어있는 경우에도 data 속성이 있는지 확인하려면 다음을 수행하십시오.

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-plugin을 만들어 요소를 쿼리 할 수 ​​있습니다.

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

그럼 당신은 단순히 사용할 수 있습니다 $("#dataTable").hasData('timer')

잡았다 :

• false값이 존재하지 않는 경우에만 리턴 합니다 (is undefined). 이에 설정되어있는 경우 false/ null그것은 hasData()여전히 돌아갑니다 true.
• 그것은 내장에서 다르다 $.hasData()있는 경우에만 검사를하면 어떤 요소에 대한 데이터가 설정됩니다.

동적으로 설정된 데이터 요소에서 더 잘 작동한다는 것을 알았습니다.

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

여기에있는 모든 답변은 jQuery 라이브러리를 사용합니다.

그러나 바닐라 자바 ​​스크립트는 매우 간단합니다.

당신이 가진 요소에만 스크립트를 실행하려는 경우 id의 #dataTable 도가 이 data-timer속성을, 그 다음 단계는 다음과 같습니다 :

// Locate the element

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

// Run conditional code

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

  [... CODE HERE...]

}

이것은 내 의견으로는 가장 쉬운 해결책은 특정 데이터 속성을 가진 모든 요소를 ​​선택하는 것입니다.

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

작동 방식의 스크린 샷은 다음과 같습니다.

오답-마지막에 편집 참조

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). 그로 인해 내 대답이 정확하지 않습니다.

작업하기 위해 간단한 부울이 필요했습니다. 존재하지 않는 것으로 정의되지 않았고 거짓이 아니기 때문에 !!부울로 변환 하는 데 사용합니다 .

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
}