[CSS] length > 0 해당 요소가 있을 때만 동작하는 코드 만들기

length가 0일 경우, 해당 객체가 없으므로 작동하지 않고

length가 1 이상인 경우는 해당 객체가 존재한다는 의미로 if문 내의 코드를 작동시킨다.

 

if ($('.timepicker').length > 0) {
	$('.timepicker').timepicker({
        timeFormat:'HH:mm',
        interval:30,
        minTime:'00:00',
        maxTime:'23:30',
        startTime:'00:00',
        dynamic:false,
        dropdown:true,
        scrollbar:true
    });
 }
 
 //if ($('객체').length > 0) {
 	//작동시키고 싶은 코드
 //}

if문 아래에는 작동시키고 싶은 코드를 적어주면 된다.

 

프로젝트를 하면 한 js 파일에 많은 코드를 정신없이 적어주다 보면 해당 코드가 필요치 않은 곳에서는 오류가 뜨기 마련인데, 이럴 때 공통으로 쓰는 코드가 아닌 정해진 곳에서만 쓰는 코드는 length > 0 을 사용하여 해당 객체가 있을 때에만 작동시키도록 하는 방법이다.

 

 

또한 jQuery와 다르게 JavaScript의 경우는 아래처럼 사용하면 된다.

(id 값 기준)

//아이디 값을 가진 해당 페이지에서만 작동할 때
let mainpage = document.getElememtById('main');

if (mainpage) {
	//메인 페이지에서만 동작하는 스크립트
}


//한 페이지에 해당 아이디값을 가진 객체가 있을 때만 작동하게 할 때
if ( document.getElementByID('item') ) {
	//해당 아이템이 있을때만 동작하는 스크립트
}

기본적으로 위 아래 같지만, 위의 코드처럼 변수에 넣어주어서 사용하면 보기에 더 깔끔하긴 한 듯!