[Jquery] .has()와 .is()를 사용해, 메뉴의 움직임 구현하기

메뉴의 움직임을 구현할 때, 메뉴가 2차 메뉴인지, 3차 메뉴인지 구분해야할 때가 있습니다.
그럴때 제가 자주 사용하는 것이 .has() 입니다.
비슷한 느낌인 .is() 와 헷갈리실 수 있는데요.
아래에서 구분해 보겠습니다.

.has()의 경우 boolean type(true or false)이 아니기 때문에, if문에 사용하고싶다면 아래처럼 사용해야합니다.

$(this).has('ul').length > 0

배열처럼 보여지기 때문에 하위 메뉴가 있으면 0보다 클 것이고, 하위 메뉴가 없다면 0 일 것입니다.
.has() 에 대해 잠깐 설명하자면, 말그대로 가진것입니다. this가 가진 ul을 선택하는 것입니다.  boolean type(true or false)이 아니라는 점 명심해주세요,


.is()의 경우에 선택된 것이 마지막요소인지 아닌지는 아래로 확인이 가능합니다.

$(this).is('li:last-child')

.is()는 상황?상태를 체크해준다고 할까요. 위와 같은 경우에는 이 this 가 li의 마지막 요소인지를 확인해주는 겁니다. 이는 boolean type(true or false)이기때문에 조건문에서 편하게 사용하실 수 있습니다.



이 예시는 해당 메소드에 대한 이해를 위해 만들어 진 것입니다.

위의 예시는 클릭할 때마다, 2차 메뉴가 존재하면 분홍색으로 배경색이 변경되며, 3차 메뉴가 존재하는 경우에는 하늘색으로 배경색이 변경됩니다. 1차 메뉴만 존재한 경우에는 아무런 변화가 없습니다.


*잘못된 부분이 있으면 언제든 알려주세요. 정정하겠습니다.