jQuery 공작소 : :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="//superkts.com/img/css/dog021.gif" /><br>
여기 강아지가 있습니다.
</div>
<div>
<img src="//superkts.com/img/css/life0010.gif" /><br>
여기 텔레비젼 있습니다.
</div>
<div>
<img src="//superkts.com/img/css/huk.gif" /><br>
여기 사람이 있습니다.
</div>
</div>
.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="//superkts.com/img/css/dog021.gif" /><br>
여기 강아지가 있습니다.
</div>
<div>
<img src="//superkts.com/img/css/life0010.gif" /><br>
여기 텔레비젼 있습니다.
</div>
<div>
<img src="//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/