.parentsUntil()

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

parentsUntil 메서드는 지정한 대상의 부모 요소들을 찾습니다.
그리고 찾을 부모를 한정할 수 있습니다.
참고로 parents 메서드는 부모 요소들을 모두 찾습니다.

예제 1
기본 예제
보기
클릭한 번호에 해당하는것의 부모를 모두 찾습니다.
부모는 회색 네모칸이며 클릭시 색이 변합니다.

1 2
1-1 1-2 1-3
2-1 2-2 2-3
2-4-1 2-4-2 2-4-3
소스
<style type="text/css">
    .css_test div {
        border-radius : 5px;
        border : 7px solid gray;
        box-shadow : 0 0 5px silver;
        margin : 7px 2px;
        padding : 5px;
    }
    .css_test span {
        border-radius : 5px;
        border : 2px solid silver;
        cursor : pointer;
        display : inline-block;
        font-size : 25pt !important;
        font-weight : bold;
        padding : 5px;
    }
</style>

클릭한 번호에 해당하는것의 부모를 모두 찾습니다.<br>
부모는 회색 네모칸이며 클릭시 색이 변합니다.<br><br>

<div class="css_test">
    <div>
        <span name="1">1</span>
        <span name="2">2</span>
        <div>
            <span name="1-1">1-1</span>
            <span name="1-2">1-2</span>
            <span name="1-3">1-3</span>
        </div>
        <div>
            <span name="2-1">2-1</span>
            <span name="2-2">2-2</span>
            <span name="2-3">2-3</span>
            <div>
                <span name="2-4-1">2-4-1</span>
                <span name="2-4-2">2-4-2</span>
                <span name="2-4-3">2-4-3</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    // span 태그에 클릭이벤트 생성하기
    $('.css_test span').bind( 'click', function(){
        j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
    });

    function j_test(v){
        // 보기 편하게 여러줄로 코딩
        $('.css_test [name=' + v + ']')
        .animate( { 'color' : '#fff' }, function(){
            // 글자색 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'color' : 'black' } );
        } )
        .parentsUntil()
        .animate( { 'border-color' : 'red' }, function(){
            // 테두리 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'border-color' : 'gray' } );
        } );
    }

</script>
관련 CSS
jQuery

$( 셀렉터 ).parentsUntil()  -  셀렉터에 해당하는 요소에서 모든 부모 요소 찾기

- 예제처럼 아무 옵션도 사용하지 않은 상태에서는 parents 메서드와 동일한 결과가 나옵니다.
- animate 메스드로 테두리색 변화 효과를 사용하려면 jQueryUI 도 사용해야 합니다.
- 참고 예제 : 제이쿼리UI 사용하기

예제 2
지정한 대상 안에서 찾기
보기
파란색 네모칸의 2번대 번호들은 그 안에서만 부모를 찾습니다.
2-X-X 번호만 반응할 것입니다.
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.
1 2
1-1 1-2 1-3
2-1 2-2 2-3
2-4-1 2-4-2 2-4-3
소스
<style type="text/css">
    .css_test div {
        border-radius : 5px;
        border : 7px solid gray;
        box-shadow : 0 0 5px silver;
        margin : 7px 2px;
        padding : 5px;
    }
    .css_test div.limit {
        border-color : blue;
    }
    .css_test span {
        border-radius : 5px;
        border : 2px solid silver;
        cursor : pointer;
        display : inline-block;
        font-size : 25pt !important;
        font-weight : bold;
        padding : 5px;
    }
</style>

파란색 네모칸의 2번대 번호들은 그 안에서만 부모를 찾습니다.<br>
2-X-X 번호만 반응할 것입니다.<br>
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.<br>

<div class="css_test">
    <div>
        <span name="1">1</span>
        <span name="2">2</span>
        <div>
            <span name="1-1">1-1</span>
            <span name="1-2">1-2</span>
            <span name="1-3">1-3</span>
        </div>
        <div class="limit">
            <span name="2-1">2-1</span>
            <span name="2-2">2-2</span>
            <span name="2-3">2-3</span>
            <div>
                <span name="2-4-1">2-4-1</span>
                <span name="2-4-2">2-4-2</span>
                <span name="2-4-3">2-4-3</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    // span 태그에 클릭이벤트 생성하기
    $('.css_test span').bind( 'click', function(){
        j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
    });

    function j_test(v){
        // 보기 편하게 여러줄로 코딩
        $('.css_test [name=' + v + ']')
        .animate( { 'color' : '#fff' }, function(){
            // 글자색 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'color' : 'black' } );
        } )
        .parentsUntil( '.css_test .limit' ) // 부모 제한하기
        .animate( { 'border-color' : 'red' }, function(){
            // 테두리 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'border-color' : 'gray' } );
        } );
    }

</script>
관련 CSS
jQuery

$( 셀렉터 ).parentsUntil( 셀렉터 )
-  셀렉터에 해당하는 요소에서 모든 부모 요소 찾습니다만 범위를 셀렉터 로 제한합니다.
- 제한 되기 때문에 상위의 모든 부모를 찾지는 않습니다.
- 만약 제한조건에 해당하는 셀렉터가 없다면 모든 것을 대상으로 합니다.

- 1-X 번호들은 제한 사항에 해당하는 부모 요소가 없으므로 모든 부모를 대상으로 합니다.
- 2-X, 2-X-X 의 경우 파란색 네모 상위의 부모는 대상으로 하지 않습니다.
- 그리고 제한조건에 해당하는 요소는 포함하지 않습니다. 그래서 2-X 번호의 경우 반응이 없죠.

예제 3
찾을 대상을 필터링 하기
보기
이번에는 부모를 필터링하여 찾는 예제입니다.
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.

1 2
1-1 1-2 1-3
2-1 2-2 2-3
2-4-1 2-4-2 2-4-3
소스
<style type="text/css">
    .css_test div {
        border-radius : 5px;
        border : 7px solid gray;
        box-shadow : 0 0 5px silver;
        margin : 7px 2px;
        padding : 5px;
    }
    .css_test div.limit {
        border-color : blue;
    }
    .css_test span {
        border-radius : 5px;
        border : 2px solid silver;
        cursor : pointer;
        display : inline-block;
        font-size : 25pt !important;
        font-weight : bold;
        padding : 5px;
    }
</style>

이번에는 부모를 필터링하여 찾는 예제입니다.<br>
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.<br>
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.<br><br>

<div class="css_test">
    <div class="only">
        <span name="1">1</span>
        <span name="2">2</span>
        <div>
            <span name="1-1">1-1</span>
            <span name="1-2">1-2</span>
            <span name="1-3">1-3</span>
        </div>
        <div class="limit">
            <span name="2-1">2-1</span>
            <span name="2-2">2-2</span>
            <span name="2-3">2-3</span>
            <div>
                <span name="2-4-1">2-4-1</span>
                <span name="2-4-2">2-4-2</span>
                <span name="2-4-3">2-4-3</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    // span 태그에 클릭이벤트 생성하기
    $('.css_test span').bind( 'click', function(){
        j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
    });

    function j_test(v){
        // 보기 편하게 여러줄로 코딩
        $('.css_test [name=' + v + ']')
        .animate( { 'color' : '#fff' }, function(){
            // 글자색 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'color' : 'black' } );
        } )
        .parentsUntil( '.css_test .limit', '.only' ) // 부모 제한하기
        .animate( { 'border-color' : 'red' }, function(){
            // 테두리 색상 변화를 애니메이션 효과로 주기
            $(this).animate( { 'border-color' : 'gray' } );
        } );
    }

</script>
관련 CSS
jQuery

$( 셀렉터 ).parentsUntil( 대상제한 셀렉터t, 대상 필터링 셀렉터 )
$( 셀렉터 ).parentsUntil( '.css_test .limit', '.only' )
-  셀렉터에 해당하는 요소에서 모든 부모 요소 찾습니다만 범위를 셀렉터 로 제한합니다.
- 그리고 찾는 부모는 only 라는 클래스명을 포함하고 있어야합니다.

- 이 조건에 해당되는 것은 1-X 번호들 입니다.

예제 4
jQuery
예제를 만들기도 좀 어려웠습니다. ^^;
이 메서드를 어디에 써야할지는 솔직히 잘 모르겠네요.
이런 메서드 까지 써야한다면 평범한것을 만드는것은 아니겠죠.

- 화이팅 입니다 !! - ㅎ
+ 관련 jQuery +
jQuery 홈페이지 .parentsUntil() API 문서 : http://api.jquery.com/parentsUntil/