:contains

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

:contains 셀렉터는 지정한 문자열이 포함된 요소를 찾습니다.

+_+
예제 1
기본 예제
보기

여기 강아지가 있습니다.

여기 텔레비젼 있습니다.

여기 사람이 있습니다.
소스
<style type="text/css">
    .css_test {
        margin : 0 auto;
        text-align : center;
        width : 500px;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        margin-top : 10px;
        padding : 7px;
    }
</style>

<button type="button" onclick="$('.css_test div:contains(강아지)').css('border-color', 'red')">강아지를 찾아라!</button>
<button type="button" onclick="$('.css_test div:contains(텔레비젼)').css('border-color', 'blue')">텔레비젼을 찾아라!</button>
<button type="button" onclick="$('.css_test div:contains(사람)').css('border-color', 'magenta')">사람을 찾아라!</button>
<button type="button" onclick="$('.css_test div').css('border-color', '')">다시하기</button>

<div class="css_test">
    <div>
        <img src="http://superkts.com/img/css/dog021.gif" /><br>
        여기 강아지가 있습니다.
    </div>
    <div>
        <img src="http://superkts.com/img/css/life0010.gif" /><br>
        여기 텔레비젼 있습니다.
    </div>
    <div>
        <img src="http://superkts.com/img/css/huk.gif" /><br>
        여기 사람이 있습니다.
    </div>
</div>
관련 CSS
jQuery

$( '셀렉터:contains(찾을문자)' )  -  해당 셀렉터찾을문자가 포함된 것을 찾습니다.
$( '.css_test  div:contains(찾을문자)' )  -  클래스명이 css_test 인 요소의 div찾을문자가 포함된 것을 찾습니다.
$( '.css_test  div:contains(강아지)' )  -  클래스명이 css_test 인 요소의 div문자열 강아지가 포함된 것을 찾습니다.

- 태그의 속성값 등이 아닌 포함하고 있는 문자열을 대상으로 합니다.

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