제이쿼리를 사용하면서 $(this) 다음으로 선택자 중에서는 가장 많이 사용하는 것들 중 하나가 아닐까 생각하는 상위 요소 선택자입니다.
1. .parent()
.parent는 선택한 대상의 바로 위에 있는 요소를 선택하는 선택자입니다.
어떤 대상을 선택하든 바로 위에 있는 요소를 선택하기 때문에 $(this).parent() 처럼 선택한 대상의 바로 위에 있는 부모를 선택해서 특정 모션을 주거나 값을 전달하는 등의 역할을 많이 하게 됩니다.
2. .parents('target')
.parents()는 선택한 대상의 위에 있는 특정 태그를 "모두" 선택할 때 이용하는 태그입니다.
ex).parents()
ex).parents('div')
ex).parents('.class')
ex).parents('.#id')
이처럼 사용하면 선택자에 선택되어 있는 태그 위에 있는 여러 태그들을 동시에 "모두" 선택 할 수 있습니다.
3. closest()
.closest()은 선택자에 선택되어 있는 태그를 기준으로 가장 근접해있는 대상을 선택하게 해줍니다.
예를들어 CodePen의 target을 기준으로 .one_depth을 선택하게되면 .one_depth가 2개가 있지만 wrap과 같이 있는 .one_depth가 선택되지 않고 가장 가까웠던 .one_depth만 있는 태그가 선택되게 됩니다.
저는 보통 ul 하위 li를 이용해서 리스트형 구조를 만들고 그 안에 있는 항목을 선택했을 때 li를 기준으로 잡고 closest을 사용하게 되면 다른 그룹에 있는 ul까지는 넘어가지 않고 가장 가까운 li만 선택하기 때문에 자주 이용하고 있습니다!
https://codepen.io/kelseykim/pen/madGNN
https://www.w3schools.com/
- parent: https://www.w3schools.com/jquery/traversing_parent.asp
- parents: https://www.w3schools.com/jquery/traversing_parents.asp
- closest: https://www.w3schools.com/jquery/traversing_closest.asp