jQuery 공작소 : :empty

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

:empty 셀렉터는 비어있는 요소를 찾습니다.
비어있는 것이란 <div></div> 이런 것들이죠. 안에 내용물이 없는 것이요.

예제 1
비어있는 요소 찾기
보기
비어있는 DIV 찾기


소스
<style type="text/css">
    .css_test {
        margin : 0 auto;
        text-align : center;
        width : 300px;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        margin-top : 10px;
        padding : 7px;
    }
</style>

비어있는 DIV 찾기<br>
<button type="button" onclick="$('.css_test div:empty').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test div').css('border-color', '')">다시하기</button>

<div class="css_test">
    <div>
        <img src="//superkts.com/img/css/dog021.gif" /><br>
    </div>
    <div></div>
    <div>
        <img src="//superkts.com/img/css/huk.gif" /><br>
    </div>
</div>
관련 CSS
jQuery

$( '셀렉터:empty' )  -  셀렉터에서 비어있는 요소만 찾기
$( '.css_test  div:empty' )  -  클래스명이 css_test 인 요소의 DIV비어있는것 찾기

예제 2
:not 셀렉터를 사용한 비어있지 않은것 찾기
보기
비어있는 않은 DIV 찾기


소스
<style type="text/css">
    .css_test {
        margin : 0 auto;
        text-align : center;
        width : 300px;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        margin-top : 10px;
        padding : 7px;
    }
</style>

비어있는 않은 DIV 찾기<br>
<button type="button" onclick="$('.css_test div:not(:empty)').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test div').css('border-color', '')">다시하기</button>

<div class="css_test">
    <div>
        <img src="//superkts.com/img/css/dog021.gif" /><br>
    </div>
    <div></div>
    <div>
        <img src="//superkts.com/img/css/huk.gif" /><br>
    </div>
</div>
관련 CSS
jQuery

$( '.css_test div:not(:empty)' )  -  클래스명이 css_test 인 요소의 div비어있지 않은것 찾기

jQuery 홈페이지 :empty API 문서 : http://api.jquery.com/empty-selector/