jQuery - contains() - 특정 문자열 요소 모두 선택하기

반응형

 

contains()

  • 지정한 텍스트를 포함하는 모든 요소 선택

구문

jQuery(":contains( text )")
  • text : 찾을 텍스트 문자열, 대소문자 구분
  • 괄호 안의 문자열은 간단한 단어로 쓰거나 따옴표로 묶을 수 있음

사용 예시

  • 특정 문자열 'eunbyeol' 이 포함된 모든 div를 찾아 글씨색을 빨간색으로 변경하고 밑 줄 긋기
<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- jQuery 라이브러리 호출 -->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
 
    <!-- Div 요소 선언 -->
<div>tester</div>
<div>admin</div>
<div>eunbyeol</div>
<div>soohyun</div>
 
<script>
    // $("div:contains('')") : div 요소 안의 문자열 검색
    // .css( 속성, 값 ) : 선택한 요소의 css 스타일 한 개 적용
    // .css( { 속성:값, 속성:값 } ) : 선택한 요소의 css 스타일 여러개 적용
    $( "div:contains('eunbyeol')" )
        .css( {"text-decoration" : "underline", "color" : "red"} );
</script>
    
</body>
</html>

 

  • 실행 화면


참고

jQuery - contains() Selector

반응형