jquery contains
복잡한 DOM에서 텍스트를 기준으로 요소를 정확히 골라야 할 때가 있습니다. 이럴 때 유용한 도구가 바로 jQuery의 :contains() 필터이며, 검색어로는 종종 "jquery contains"로 찾아볼 수 있습니다. 클래스나 ID가 없어도 텍스트 내용을 기준으로 원하는 요소를 선택하고 조작할 수 있다는 점이 큰 장점입니다.
1. 📝 :contains() 선택자의 기본 구문
:contains()는 특정 요소의 텍스트 노드에 지정한 문자열이 포함되어 있는지를 판별하는 선택자입니다. 실무 문서나 검색에서 "jquery contains"라는 표현으로 설명되는 경우가 많습니다.
기본적인 구문
$("요소:contains(텍스트)")
- "요소": 검색을 시작할 태그명 또는 CSS 선택자(예:
li,div.box,p)를 지정합니다. - "(텍스트)": 요소 내부에서 찾고자 하는 문자열을 작은따옴표(
'')나 큰따옴표("")로 감싸서 전달합니다.
주의:
:contains()는 기본적으로 대소문자를 구분합니다. 예를 들어 'Apple'과 'apple'은 서로 다른 결과를 만듭니다.
2. 💡 실습 예제: 목록에서 특정 항목 찾기
HTML 코드
간단한 과일 목록을 예로 들겠습니다. 내부 텍스트를 기준으로 항목을 골라야 할 때 유용합니다.
<ul id="fruit-list">
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
<li>빨간 사과</li>
</ul>
jQuery 사용
예를 들어 "사과"라는 단어를 포함한 모든 <li>를 찾으려면 다음과 같이 작성합니다. 이 동작은 검색어로 흔히 쓰이는 "jquery contains" 패턴과 동일한 맥락입니다.
// <li> 요소 중에서 "사과"라는 텍스트를 포함하는 요소를 선택합니다.
$("li:contains('사과')")
// 선택된 요소에 스타일을 적용합니다.
.css('background-color', '#FADBD8')
.css('border', '2px solid red');
실행 결과 미리보기
원래 목록
- 사과
- 바나나
- 오렌지
- 빨간 사과
위 코드를 실행하면 "사과"라는 텍스트를 포함한 항목들, 즉 '사과'와 '빨간 사과'가 모두 선택되어 스타일이 적용됩니다. 이처럼 텍스트 매칭 기반의 선택은 클래스나 ID 없이도 빠른 대상 추출이 가능합니다.
3. ✨ 고급 팁: 포함 관계와 활용
- 부분 일치:
:contains()는 전체 단어 일치가 아니라 부분 문자열 포함을 기준으로 동작합니다. 예컨대'사과'를 검색하면'빨간 사과'도 함께 선택됩니다. - 자식 요소 텍스트 포함: 선택된 요소의 모든 자식 노드 텍스트까지 검사하므로, 내부에 다른 태그가 있어도 부모 요소가 선택될 수 있습니다.
핵심 정리:
:contains()는 텍스트 기반으로 요소를 찾아 스타일을 적용하거나 이벤트를 바인딩할 때 매우 실용적입니다. 실무 문서와 검색에서 자주 언급되는 "jquery contains" 개념을 이해하면 코드 작성이 더 수월해집니다.
함께 보면 좋은 엔터프라이즈 사례
🚀 이 주제, 우리 서비스에 어떻게 적용할까요?
jquery contains를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.
이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.
댓글
댓글 쓰기