jQuery / Method / .parent() - 부모 요소 선택하는 메서드

.parent()

.parent()는 어떤 요소의 부모 요소를 선택합니다.

문법

.parents( [selector] )

selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어

$( 'p' ).parent().css( 'color', 'green' );

은 p의 부모 요소의 색을 녹색으로 만들고,

$( 'p' ).parent( 'div' ).css( 'color', 'green' );

은 p의 부모 요소가 div일 때만 녹색으로 만듭니다.

예제

ef를 클래스 값으로 갖는 p 요소의 부모 요소가 cd를 클래스 값으로 갖는 div일 때, 내용을 빨간색으로 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p.ef' ).parent( 'div.cd' ).css( 'color', 'red' );
      } );
    </script>
  </head>
  <body>
    <div class="ab">
      <p>Hello</p>
      <div class="cd">
        <p class="ef">
          Lorem Ipsum Dolor
        </p>
      </div>
    </div>
  </body>
</html>

참고

  • 자식 요소를 선택할 때는 .children()을 사용합니다.

Related Posts

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드

.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...

jQuery / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자

jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자

:button :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 $( ':button' ) type이 button인 모든 요소를 선택합니다. $( '.xy:button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드

.children() .children()은 어떤 요소의 자식 요소를 선택합니다. 문법 .children( ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 div 요소의 자식 요소의 색을 파란색으로 만듭니다. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); 는 div 요소의 자식 요소 중 클래스 값으로 bl을 가진 p 요소의 색을 파란색으로 만듭니다. 예제 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 ...

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

:nth-child() :nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

.get() .get()은 선택한 요소를 배열(Array)로 가져옵니다. 문법 .get() 선택한 모든 요소를 가져옵니다. .get( index ) 선택한 요소 중 특정한 것만 가져옵니다. 예제 1 모든 li 요소를 jb 배열로 가져온 후, 각 요소의 내용을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...