jQuery 공작소 : .has()

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

has 메서드는 지정한 셀렉터에 해당하는 요소를 가지고 있는것을 찾습니다.
:has 셀렉터와 같습니다.

예제 1
이미지를 자식으로 가지고 있는 span 요소 찾기
보기
span 요소 안에 이미지가 있는것을 찾아봅니다.

jQuery 공작소 !!
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test .on {
        background : #FFDDED;
        border-radius : 50%;
        border : 3px solid red;
        padding : 5px;
    }
</style>

span 요소 안에 이미지가 있는것을 찾아봅니다.<br><br>

<button type="button" onclick="j_test()">눌러보세용</button>

<div class="css_test">
    <span>
        <img src="//superkts.com/img/css/dog061.gif" />
    </span>
    <span>
        <img src="//superkts.com/img/css/cat051.gif" />
    </span>
    <span>
        jQuery 공작소 !!
    </span>
</div>

<script type="text/javascript">

    function j_test(){
        $( '.css_test span' ).has( 'img' ).addClass( 'on' );

        // 1초후 빨간 박스 CSS 해제
        setTimeout(function(){
            $( '.css_test span' ).has( 'img' ).removeClass( 'on' );
        }, 1000);        
    }

</script>
관련 CSS
jQuery 홈페이지 .has() API 문서 : http://api.jquery.com/has/