Web 프로그램/js, jQuery

jQuery parent, children, find 차이

Link2Me 2018. 12. 14. 21:41
728x90

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>


$(".mylink").click(function() { // 아래 4개는 모두 동일한 결과 반환
    $(this).parent().siblings(".something1");
    $(this).parent().prev(); // if you always want the parent's previous sibling
    $(this).parents(".box").children(".something1");

    $(this).closest('.box').children('.something1');

});


- closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있다.
- 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용한다.
- parent()는 해당 요소의 바로 위의 부모 요소를 반환한다.

- children()은 해당 요소의 바로 아래 자식 요소들만을 반환한다.

- find()는 해당 노드 아래의 전체 DOM을 탐색하여 반환한다.

- prev() - 이전 요소를 선택하도록 반환한다.
- next() - 다음 요소를 선택하도록 반환한다.




728x90