필터링
선택된 집합에서 다시 조건에 맞는 집합을 선택합니다.
필터링(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>
