jQuery 공작소 : .parent()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

parent 메소드는 바로 위 부모 요소를 선택합니다.
바로위의 한개만 선택합니다.

예제 1
기본예제 - 지정한 요소의 상위 부모요소 찾기
보기
jQuery 공작소 parent - 여기를 클릭해 보세요.
$( this ).parent().addClass( 'sel' )
소스
<style type="text/css">
    .css_test, .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 12px;
    }
    .css_test .sel {
        border-color : blue;
    }
</style>

<div class="css_test">
    <div>
        <div>
            <div onclick="j_test(this)">
                jQuery 공작소 parent - 여기를 클릭해 보세요.<br>
                $( this ).parent().addClass( 'sel' )
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function j_test(el){
        $(el).parent().addClass('sel');
    }
</script>
관련 CSS
borderborder-colorborder-radiusbox-shadowpadding
jQuery

$( 셀렉터 ).parent()  -  셀렉터에 해당하는 부모요소를 가져옵니다.
$( 셀렉터 ).parent().addClass( 'sel' )   -  셀렉터에 해당하는 부모요소에 sel 클래스 추가하기

예제 2
두개이상 사용하여 더 위의 부모요소 선택하기
보기
jQuery 공작소 parent - 여기를 클릭해 보세요.
$( this ).parent().parent().css('border-color', 'red');


jQuery 공작소 parent - 여기를 클릭해 보세요.
$( this ).parent().parent().css('border-color', 'red');
소스
<style type="text/css">
    .css_test, .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 10px;
    }
</style>

<div class="css_test">
    <div>
        <div>
            <div onclick="j_test(this)">
                jQuery 공작소 parent - 여기를 클릭해 보세요.<br>
                $( this ).parent().parent().css('border-color', 'red');
            </div>
        </div>
    </div>
</div>
<br><br>
<div class="css_test">
    <div>
        <div onclick="j_test(this)">
            jQuery 공작소 parent - 여기를 클릭해 보세요.<br>
            $( this ).parent().parent().css('border-color', 'red');
        </div>
    </div>
</div>

<script type="text/javascript">
    function j_test(el){
        $(el).parent().parent().css('border-color', 'red');
    }
</script>
관련 CSS
borderborder-radiusbox-shadowpadding
jQuery

$( 셀렉터 ).parent().parent()  -  셀렉터에 해당하는 부모의 부모요소를 가져옵니다.

- 여러개를 붙여서 사용하면 부모의 부모의 부모의.. 이렇게 찾을 수 있습니다.
- 좀 웃겨보이긴 하지만요.. ^^;

예제 3
특정 부모요소만 찾기
보기
특정 부모요소만 찾기 (노란색 jQuery 공작소 기준으로 특정 부모만찾기)

jQuery 공작소

jQuery 공작소

소스
<style type="text/css">
    .css_test, .css_test div, .css_test p {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 10px;
        margin : 0;
    }
    .css_test span {
        background : yellow;
        padding : 10px;
    }
</style>

특정 부모요소만 찾기 (노란색 jQuery 공작소 기준으로 특정 부모만찾기)<br><br>
<button type="button" onclick="$('.css_test span').parent('p').css('border-color', 'red');">눌러보세용</button>

<div class="css_test">
    <div>
        <span>jQuery 공작소</span>
    </div>
</div>
<br>
<div class="css_test">
    <p>
        <span>jQuery 공작소</span>
    </p>
</div>
관련 CSS
backgroundborderborder-radiusbox-shadowmarginpadding
jQuery

$( 셀렉터 ).parent( 셀렉터 )  -  셀렉터에 해당하는 부모에서 지정한 셀렉터에 맞는 부모만 찾기
$( '.css_test  span' ).parent( 'p' )  -  클래스명이 css_test 인 요소의 span 의 부모중 p 요소인것만 찾기

+ 관련 jQuery +
jQuery 홈페이지 .parent() API 문서 : http://api.jquery.com/parent/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소