티스토리 뷰

jQuery

[jQuery] 필터링

필터링

선택된 집합에서 다시 조건에 맞는 집합을 선택합니다.


필터링(Filtering)

메서드 설명
.eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.
.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
.is() 선택된 요소 객체의 특징을 판별합니다.
.last() 선택된 요소에서 마지막번째 자식 요소를 찾습니다.
.map() 선택된 요소의 배열 집합을 새롭게 변경합니다.
.not() 선택된 요소에서 조건에 맞지 않는 것을 선택합니다.
.slice() 선택된 요소에서 조건의 범위로 재선택합니다.
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").eq(2).css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li:eq(2)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").filter(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").first().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").last().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").has("ul").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").not(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").slice(1,5).css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$(".list li").is(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			});
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul>
				<li class="one1">one1</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 class="one9">one9</li>
				<li id="one10">one10
					<ul>
						<li>one10-1<img src="../css.png" alt="이미지"></li>
						<li>one10-2<img src="../html5.png"></li>
						<li>one10-1</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html> 

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼