본문 바로가기
프로그래밍/jQuery

jQuery API정복 - 특정 단어 포함 요소 선택하기 : jQuery(':contains(text)')

by zoo10 2011. 1. 27.

:contains('text') 는 'text'에 해당하는 단어가 포함된 컨텐츠를 가진 요소를 찾는 선택자입니다.

원문 링크 http://api.jquery.com/contains-selector/

contains selector

개요 : input 태그 중에 type 이 checkbox 인 요소를 찾습니다.(아자님이 찾아주셨습니다. ^^;;)

  • jQuery(':contains(text)')
  • text text 에 해당하는 문자열을 찾습니다. 대소문자를 구별합니다.

이 선택자는 괄호안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다. 말이 좀 어렵네요. 예제를 보시면 아주 간단합니다.단, 대소문자를 구분합니다.

예 제  
div 영역의 내용 중에 'John' 이라는 글자가 있으면 그 영역의 텍스트에 밑줄을 칩니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  
<div>John Resig</div>

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
      
    
<script>
$("div:contains('John')").css("text-decoration", "underline");
    </script>

</body>
</html>

미리보기

 

예제를 보시면 아주 쉬우시죠. 의외로 활용도가 있을 것 같습니다. 이런 내용도 있었음을 기억하세요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.