jQuery 요소탐색 method

🍫 Children()

• children() : 선택요소 바로 아래 단계인 자식요소만 선택
  

주로 요런 네비게이션 Menu 목록이 펼쳐지게 하는 용도로 쓴다.
! 다만, 사진처럼 Menu1, Menu2, Menu3이 있고 각각의 submenu가 있는 경우에는
구조가 비슷해서 클래스 네임을 동일하게 쓰는 경우가 대부분이다.
그래서 아래처럼 작성하면 모든 메뉴의 목록이 아래로 slideDown 돼버린다ㅠㅠ

<script>

  $('.menu li').mouseenter(function(){ 
    $('sub-menu').slideDown();
  })

</script>

이 경우를 대비해 현재 특정 이벤트가 발생한 지점만 선택하는
무적의 jQuery 선택자 this 와
그것의 자식요소만 선택하는 children() 을 같이 사용하면 해결 가능하다. (아래처럼)

<script>

  $('.menu li').mouseenter(function(){ 
    $(this).children().slideDown();
  })

</script>

🍫 siblings()

• siblings() : 선택요소의 형제요소 선택
  

이 친구도 children()과 비슷한 맥락
주로 요렇게 같은 계층의 특정 Menu 선택했을 시 선택한 것에는 특정 class를 추가해주고
나머지 같은 계층 Menu 요소에는 특정 class를 제거하는 용도로 쓴다.
하지만, 같은 계층구조이기 때문에 class이름을 동일하게 써놓는 경우가 대부분.

<위사진에서 예를들어>

• 현재는 Portfolio라는 메뉴가 선택되어 있는 상태이다.
• About 이라는 메뉴를 클릭하면
  (About메뉴: 빨간색배경+흰텍스트로 변경, Portfolio메뉴: 흰배경+빨간텍스트로 변경) 이 두가지가 동시에 일어나야 하는데 둘다 Portfolio메뉴가 (빨간배경+흰텍스트) 이 서식을 유지하는게 문제인 것이다.

말을 복잡하게도 해놓은 것 같은데
요점은, 특정 메뉴를 선택했을 때
그 선택한 메뉴에는 addClass를 해주고
동시에 나머지 같은 계층의 메뉴(형제요소)에는 removeClass를 해주어야 한다는 것이다.

<style>

  .btn span .active {
     background-color : red;
     color : white;
  }
  
</style>

<script>

  $('.btn span').click(function(){ 
    $(this).addclass('active');
    $(this).siblings().removeClass('active');
  })

</script>