• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Traversing] JQ - parents() 메서드 - 선택요소 모든 조상요소 반환 (= parents메서드 = 패런츠 매서드)

목차
  1. parents() 예제 - <span>의 모든 조상 요소 반환
  2. parents() 정의
  3. parents() 구문
  4. parents() 예제 - 검색 범위 좁히기
  5. parents() 예제 - 여러 조상 반환
  6. parents() 예제 - 조상요소의 태그명 출력

 

parents() 예제 - <span>의 모든 조상 요소 반환 

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 15px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("span").parents().css({"color": "red", "border": "2px solid red"});

});

</script>


<body class="hz">body (고조부모)

  <div>div (증조부모)

    <ul>ul (조부모)  

      <li>li (부모)

        <span>홈짱닷컴 Homzzang.com</span>

      </li>

    </ul>   

  </div>

</body>

 

결과보기

 

parents() 정의

 

선택 요소의 모든 상위 요소 반환.

 


 

1.

부모요소부터 시작해서 <html> 요소까지 탐색해감.

 

2.

매개변수가 비어 있으면, <body> 및 <html> 요소까지 탐색.

 

3. 

DOM 따라 탐색하는 점에서 closest() 메서드와 유사하나, 다음과 같은 차이점 존재.

 

parents() 메서드

  • 부모요소부터 시작
  • DOM 트리 따라 탐색. 매개변수와 일치하는 모든 조상요소 반환.
  • 반홛된 jQuery 객체 개수: 0 또는 1개 이상 요소

 

closest() 메서드

  • 현재요소부터 시작
  • DOM 트리 따라 탐색. 매개변수와 일치하는 첫번째 조상요소 반환.
  • 반홛된 jQuery 객체 개수: 0 또는 1개 요소.

 

4.

parent() 메서드 - 선택요소의 직접 부모요소 반환.

parentsUntil() 메서드 - 두 인수 사이의 모든 상위 요소 반환.

 

 

parents() 구문

 

$(selector).parents(filter)

 


[매개변수]

 

filter

선택. 검색 범위 좁힐 선택자 표현식 지정.

※ 여러 조상 반환하려면, 콤마(,)로 구분해 나열.

 

 

parents() 예제 - 검색 범위 좁히기

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 15px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("span").parents("ul").css({"color": "red", "border": "2px solid red"});

});

</script>


<body class="hz">body (고조부모)

  <div>div (증조부모)

    <ul>ul (조부모)  

      <li>li (부모)

        <span>홈짱닷컴 Homzzang.com</span>

      </li>

    </ul>   

  </div>

</body>

 

결과보기

 

parents() 예제 - 여러 조상 반환

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 15px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("span").parents("div, li").css({"color": "red", "border": "2px solid red"});

});

</script>


<body class="hz">body (고조부모)

  <div>div (증조부모)

    <ul>ul (조부모)  

      <li>li (부모)

        <span>홈짱닷컴 Homzzang.com</span>

      </li>

    </ul>   

  </div>

</body>

 

결과보기

 

parents() 예제 - 조상요소의 태그명 출력

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  var ancestors = $("span").parents().map(function(){

  return this.tagName;}).get().join(", ");

  $("span").after("<h2>" + ancestors + "<h2>");

});

</script>


<body>

  <div>  

    <p>       

      <span>홈짱닷컴 Homzzang.com</span>  

    </p>  

  </div>

</body>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012