728x90
반응형
JQuery는 선택한 요소가 여러개일경우 필터링을 할 수 있습니다.
<div id="fruitBox">
<div class="fruit">사과</div>
<div class="fruit"><b>오렌지</b></div>
<div class="fruit">파인애플</div>
</div>
<p id="result"></p>이러한 html 코드가 있다고 생각합시다
$(".fruit:has(b)").append("->선택한 과일입니다");위와같이 JQuery를 작성해주면 결과 값은
사과
오렌지 ->선택한 과일입니다
파인애플
이렇게 나오게 됩니다. 필터링에 사용될 수 있는 선택자들은 다음과 같습니다
| 선택자 | 예제 | 설명 |
| :eq(n) | $("ul li:eq(3)") | 선택한 요소 중에서 인덱스가 n인 요소를 선택함 |
| :gt(n) | $("ul li:gt(3)") | 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함 |
| :lt(n) | $("ul li:lt(3)") | 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함 |
| :even | $("tr:even") | 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함 |
| :odd | $("tr:odd") | 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함 |
| :first | $("p:first") | 선택한 요소 중에서 첫 번째 요소를 선택함 |
| :last | $("p:last") | 선택한 요소 중에서 마지막 요소를 선택함 |
| :animated | $(":animated") | 선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함 |
| :header | $(":header") | 선택한 요소 중에서 <h1>부터 <h6>까지의 요소를 모두 선택함 |
| :lang(언어) | $("p:lang(ko)") | 선택한 요소 중에서 지정한 언어의 요소를 모두 선택함 |
| :not(선택자) | $("input:not(:empty)") | 선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함 |
| :root | $(":root") | 선택한 요소 중에서 최상위 루트 요소를 선택함 |
| target | $("a[target='_blank']") | 선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함 |
| :contains(텍스트) | $(":contains('Hello')") | 선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함 |
| :has(선택자) | $("p:has(span)") | 선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함 |
| :empty | $(":empty") | 선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함 |
| :parent |
$(":parent") | 선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함 |
위와 같이 선택자들을 사용할 수 있습니다
728x90
반응형