jQuery : element 존재 여부 체크 방법 : 주의사항, 팁

jQuery : element 존재 여부 체크 방법 : 주의사항, 팁

 

동적 요소를 사용할 때 Javascript에서 element에 특정 수행하기 전에 요소가 존재하는지 확인해야합니다. 그렇지 않으면 element에 정의되지 않은 오류가 발생합니다. 다른 방식으로 수행된다는 점을 제외하고는 jQuery와 다르지 않습니다.  JavaScript에서는 document.getElementById를 사용하여 요소가 존재하는지 확인합니다.

 

 

 

element가 존재하는지 확인하는 순수 JavaScript

if(document.getElementById('div')){ //do stuff }

 

 

 

요소가 존재하는지 확인하는 JQuery 접근법

jQuery에서는 다음과 같이 구현할 수 있다고 생각하실 수 있습니다.

if($('#div')){ //do stuff }

 

 

 

그러나 셀렉터를 사용할 때마다 jQuery는 항상 객체를 반환하므로 div가 존재하지 않더라도 if 문은 항상 true를 반환하므로 jQuery에서는 작동하지 않습니다. 이 문제를 해결하려면 jQuery가 찾을 수 있는 객체 수를 계산해야합니다. 

if($('#div').length){ //do stuff }

 

 

 

length 명령을 사용하면 찾을 수있는 #div 수를 반환하며 이 숫자가 0보다 큰 경우 요소가 존재하므로 div에 대한 작업을 수행합니다. #div가없는 경우 if 문은 false를 반환하며 존재하지 않는 요소에 대해서는 아무 작업도 수행하지 않습니다.