.parents()

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

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

+_+
예제 1
기본예제 - 지정한 요소의 모든 부모요소 찾기
보기
jQuery 공작소 parents - 여기를 클릭해 보세요.
$( this ).parents().css('border-color', 'red')

jQuery 공작소

자신이 속한 모든 부모를 찾습니다.
소스
<style type="text/css">
    .css_test, .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        box-shadow : 0 0 5px silver;
        padding : 12px;
    }
</style>

<div class="css_test">
    <div>
        <div>
            <div onclick="j_test(this)">
                jQuery 공작소 parents - <b>여기를 클릭해 보세요.</b><br>
                $( this ).parents().css('border-color', 'red')
            </div>
        </div>
    </div>
</div>
<br>
<div class="css_test">
    jQuery 공작소
</div>
<br>자신이 속한 모든 부모를 찾습니다.

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

$( 셀렉터 ).parents()  -  셀렉터에 해당하는 모든 부모요소를 찾습니다.

예제 2
특정 부모요소만 찾기
보기
특정 부모요소만 찾기 (노란색 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').parents('div').css('border-color', 'red');">눌러보세용</button>

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

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

+ 관련 jQuery +
jQuery 홈페이지 .parents() API 문서 : http://api.jquery.com/parents/