티스토리 뷰

jQuery

[jQuery] 내용 필터 선택자

내용 필터 선택자

콘텐츠와 관련된 요소를 선택하는 방법입니다.


내용 필터 선택자(Content Filters)

내용 필터 선택자
종류 설명
:contains() ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다.
:empty 요소에 텍스트 없을 때 선택됩니다.
:has() 요소 내부에서 찾고 싶은 태그를 후손 요소까지 살펴본 후 요소가 있으면 반환합니다.
:parent empty와 반대로 요소에 텍스트가 존재할 때에 선택됩니다.
Sample : 내용 필터 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){        
            //$(".list li:contains('web')").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });  
			//$(".list ul:has('li')").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" }); 
			//$(".list li:empty").text("jquery").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d"});  
			$(".list li:parent").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });    
        }); 
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul class="list2">
				<li class="one1">web</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li id="one10">one9</li>
			</ul>
			<ul class="list3">
				<li class="one1"></li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
			</ul>
		</div>  
	</body>
</html>  
댓글
댓글쓰기 폼