[JQuery] 상위요소, 부모 요소 찾는 방법(parent, parents, closest)

 

 

 

 

 

 

 

 

 

제이쿼리를 통하여 부모 요소를 선택하는 방법은 대표적으로 세 가지 함수가 있습니다.

parent()

parents()

closest()

 

 

 

 

 

 

parent()

---

parent 함수는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다.

 

 

아래 예시와 같이, parent 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그를 반환하게 됩니다.

<div>
  <p>
    <span>What is the parent elements?</span>
  </p>
</div>

<script>
    $(document).ready(function () {
    	var tagName = $('span').parent().prop('tagName');
    	alert('parent() elements => ' + tagName);
    });
</script>

 

 

 

 

 

 

parents()

---

만약 하나가 아닌 모든 부모요소를 찾을경우에는 parents 함수를 사용합니다.

 

 

아래 예시와 같이, parents 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그와 div 태그 모두를 반환하게 됩니다.

<div>
  <p>
    <span>What is the parent elements?</span>
  </p>
</div>

<script>
    $(document).ready(function () {
    	var tagName = $('span').parents().prop('tagName');
    	alert('parents() elements => ' + tagName);
    });
</script>

 

 

 

 

 

 

closest()

---

closest함수는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있습니다. 

 

 

아래 예시와 같이, closest함수를 사용하여 span 태그의 부모 요소 중 div 태그를 가져올 수 있습니다.

<div>
  <p>
    <span>What is the parent elements?</span>
  </p>
</div>

<script>
    $(document).ready(function () {
    	var tagName = $('span').closest('div').prop('tagName');
    	alert('closest() elements => ' + tagName);
    });
</script>