[jQuery] 아...이런 siblings;;

제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다.

 

 

위의 코드는 누구나 구현이 가능한 쉬운 누구나 기초를 배우셨다면 구사가 가능한 정도입니다. 하지만, siblings() 이녀석이 저를 괴롭힐 거라고는 조금도 생각하지 못했습니다...

 

이번에는  select 태그의 value 값으로 리스트를 호출하는 방식으로 셀렉트 메뉴를 구성했습니다. 일단, 하나의 ul의 여러개의 list 구조로 이루어져있고, 각 주제마다 class를 부여한 상태입니다.

 

 

맨 위의 예제처럼 쉽게 풀릴 것 같았지만, 같은 클래스를 사용하는 list 구조에서 siblings를 부여하니까 show는 커녕 리스트 전부가 hide되면서 조금 황당하기도 했습니다. 그래서 console을 찍어봤습니다.

 

제가 이해했던 부분은 brand1을 제외한 brand2와 3이 선택되겠구나 했지만., 모두 선택이 되었고, 이 과정에서 siblings()에 아무 셀렉터를 기재하지 않아서 모든 li가 삭제 된 것 같습니다. 일단, 제가 해결한 방법은 아래와 같습니다.

 

 

siblings()에 숨길 brand 형제들을 기재하니까 정상적으로 탭메뉴가 구현이 되었습니다. 이걸 구글링해서 어떻게 기입을 해야할지 몰라서 머리를 막 굴리고, 굴리고 굴려서 얻은 결과라 조금 더 값진 것 같습니다. ul을 그냥... 2개 쓰면 될 것을 list로 하니까 고생을 하기는 했지만, 이러한 탭메뉴 구조는 확실하게 인지를 하고 갔고, 제가 siblings() 메서드를 다시 한 번 보게되는 계기가 되었습니다.

 

조금 더 깔끔한 방법이 있으시다면, 저도 알려주세요. 열심히 공부하고 있는 유저로서 포스팅하면서 여러분 같이 공부해봐요 ㅠㅠ