개발/JavaScript

[JQuery] 근처 값 찾아 가져오기 (closest(), parents())

서해쭈꾸미 2024. 4. 19. 01:05
closest() vs parent()

 

공통점

closest()와 parents() 둘 다 기준이 되는 요소의 부모만 찾을 수 있다.

 

차이점

closest()는 기준 요소의 제일 가까운 부모요소 하나만 찾지만, parents()는 기준 요소의 모든 부모를 찾는다.

 

 

 

closest()

 

<div class="box" comment-id = "a">
  <div class="box" comment-id ="b">name</div>
     <div class="btns">
          <button type="button" class="delbtn">삭제</button>
          <button type="button" class="modibtn");">수정</button>
      </div>
   </div>
 </div>
let commentID = $(".delbtn").closest(".box").attr("comment-id");
//결과 : commentID = b

 

class가 delbtn인 것의 부모중 가장 가까우면서, class가 box인 태그의 comment-id 요소 값 가져오기

 

 

 

parent()

 

<div class="box" comment-id = "a">
  <div class="box" comment-id ="b">name</div>
     <div class="btns">
          <button type="button" class="delbtn">삭제</button>
          <button type="button" class="modibtn");">수정</button>
      </div>
   </div>
 </div>
$(".delbtn").closest(".box").attr("comment-id");

 

class가 delbtn인 것의 모든 부모 중, class가 box인 태그의 comment-id 요소 값 가져오기

=> "a"와 "b", 2가지의 값을 가져오게 됨.