[제이쿼리/jQuery] 필터셀렉터(:) . :first :last :even :odd :eq :gt :lt :has :not
요약
인자로 전달된 selector 요소를 하나 이상 포함하고 있는 요소를 가져온다.
:not(selector)
인자로 전달된 selector 와 일치하지 않는 모든요소를 가져온다.
HTML
- 1-0
- 1-1
- 1-2
- 2-0
- 2-1
- 2-2
첫번째 일치하는 요소 찾기(":first")
아래 예제는 .middle >ul > li 요소중 첫번째 요소를 가져옵니다.
$(".middle>ul>li:first").css("border","1px solid #ff0000")
결과
마지막으로 일치하는 요소 찾기(":last")
아래 예제는 .top > ul > li 요소중 마지막 요소를 가져옵니다.
$(".top>ul>li:last").css("border","1px solid #ff0000")
결과
짝수번째 요소 찾기 (":even")
아래 예제는 li 요소중 짝수번째 요소를 모두 가져옵니다.
index는 0부터시작하여 0, 2, 4, 6 ... 번째 요소를 가져옵니다.
$("li:even").css("border","1px solid #ff0000")
결과
홀수번째 요소 찾기 (":odd")
아래 예제는 li 요소중 홀수번째 요소를 모두 가져옵니다.
index는 0부터시작하여 1, 3, 5, 7 ... 번째 요소를 가져옵니다.
$("li:odd").css("border","1px solid #ff0000")
결과
인덱스에 위치한 요소 찾기 (":eq(index)")
아래 예제는 li 3번째 요소를 가져옵니다.
index는 0부터시작합니다.
$("li:eq(3)").css("border","1px solid #ff0000")
결과
인덱스 보다 큰 요소 찾기 (":gt(index)")
아래 예제는 index가 2보다 큰 요소를 가져오며, inex는 0부터시작합니다.
( index > 2) 즉 3, 4, 5 번째 요소를 가져옵니다.
$("li:gt(2)").css("border","1px solid #ff0000")
결과
인덱스 보다 작은 요소 찾기 (":lt(index)")
아래 예제는 index가 2보다 작은 요소를 가져오며, inex는 0부터시작합니다.
( index < 2 ) 즉 0, 1 번째 요소를 가져옵니다.
$("li:lt(2)").css("border","1px solid #ff0000")
결과
selector 요소를 하나이상 포함한 요소 찾기 (":has(selector)")
아래 예제는 div 의 전체하위속성중 class="el" 이 하나이상 포함된 div요소를 찾습니다.
따라서 class="el" 은 #top div 가 가지고 있기 때문에 #top div 에 css 가 적용됩니다.
$("div:has('.el')").css("border","1px solid #ff0000")
결과
selector 와 일치하지 않는 요소 찾기 (":not(selector)")
아래 예제는 li 요소중 class="el" 이 아닌 모든 요소를 가져옵니다.
따라서 #top>ul>li 의 첫번째 요소를 제외한 전체 요소에 css 가 적용됩니다.
$("li:not(.el)").css("border","1px solid #ff0000")
결과
