문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======jQuery Traversing - Ancestors======
<WRAP left notice 70%>
  * description : jQuery Traversing - Ancestors
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-19
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article====
[[https://www.w3schools.com/jquery/jquery_traversing_ancestors.asp|jQuery Traversing - Ancestors]]\\
\\
%%jQuery%%를 사용하면 DOM 트리를 횡단하여 요소의 조상(ancestors)을 찾을 수 있습니다.\\
\\
조상(ancestor)은 부모(parent), 조부모(grandparent), 증조부모(great-grandparent) 등이 될 수 있습니다.\\

=====Traversing Up the DOM Tree=====

DOM 트리를 위로 횡단하는 데 유용한 세 가지 %%jQuery%% 메서드는 다음과 같습니다.\\
  * ''parent()''
  * ''parents()''
  * ''parentUntil()''

=====jQuery parent() Method=====

''parent()'' 메서드는 선택한 요소의 __직접 부모 요소__(direct parent element)를 반환합니다.\\
\\
이 메서드는 %%DOM%% 트리의 단일 수준만 회단합니다.\\
\\
다음 예제는 각 ''%%<span>%%'' 요소의 직접 부모 요소를 반환합니다:\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("span").parent().css({ "color": "red", "border": "2px solid crimson" });
    });
</code>

=====jQuery parents() Method=====
''parent()'' 메서드는 선택한 요소의 (문서의 루트 요소 (%%<html>%%)까지 위에 있는) 모든 조상(ancestor) 요소들을 반환합니다.\\
\\
다음 예제는 모든 ''%%<span>%%'' 요소의 모든 조상(ancestors) 요소들을 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("span").parents().css({ "color": "red", "border": "2px solid red" });
    });
</code>
\\
매개 변수를 선택하여 조상 검색을 필터링 할 수도 있습니다.\\
\\
다음 예는 ''%%<ul>%%'' 요소인 모든 ''%%<span>%%'' 요소의 모든 조상들을 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("span").parents("ul").css({ "color": "red", "border": "2px solid red" });
    });
</code>

=====jQuery parentsUntil() Method=====
''parentUntil()'' 메서드는 주어진 두 인수(arguments) 사이의 모든 조상 요소들을 반환합니다.\\
\\
다음 예에서는 ''%%<span>%%'' 및 ''%%<div>%%'' 요소 사이의 모든 조상(ancestors) 요소들을 반환합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("span").parentsUntil("div").css({ "color": "red", "border": "2px solid red" });
    });
</code>


=====jQuery Traversing Reference=====
모든 %%jQuery%% Traversing 메서드에 대한 전체 개요를 보려면 [[https://www.w3schools.com/jquery/jquery_ref_traversing.asp|jQuery Traversing Reference]]로 이동하십시오.

{{tag>오션 jQuery Traversing - Ancestors}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구