테이블에서 전에 썻던 even odd first last 와 같은 방법으로는 한계가 있다.
고로 아래의 방법을 확인해보자.
eq() : 괄호 안의 번호에 해당하는 순서 태그를 지칭
nth-child() : 괄호 안의 식에 해당하는 순서 태그들을 지칭
gt() : 괄호 안의 번호에 초과하는 태그들을 지칭
lt() : 괄호 안의 번호에 미만인 태그들을 지칭
contains() : 특정 문자열을 포함
has() : 특정 태그를 가지고 있는
not() : 해당 선택자와 일치하지 않는 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>함수 형태의 필터 선택자</h1>
<h3>:nth-child() 필터선택자</h3>
<table border="1">
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<td>김김김</td>
<td>C형</td>
<td><a>달</a></td>
</tr>
<tr>
<td>님님님</td>
<td>D형</td>
<td>태양</td>
</tr>
<tr>
<td>딤딤딤</td>
<td>E형</td>
<td>은하계</td>
</tr>
<tr>
<td>림림림</td>
<td>C형</td>
<td>지구</td>
</tr>
<tr>
<td>밈밈밈</td>
<td>D형</td>
<td>소행성</td>
</tr>
<tr>
<td>빔빔빔</td>
<td>C형</td>
<td>집</td>
</tr>
<tr>
<td colspan="2">총원</td>
<td>6</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
// n번째에 위치하는 객체 선택
$("tr:eq(0)").css({"background":"black", "color":"white"});
// 수열번 째 위치하는 태그 선택(순서로 적용)
$("tr:nth-child(2n)").css("background","yellowgreen");
$("tr:nth-child(3n)").css("background", "orange");
// n번째를 초과하는 객체 선택(인덱스 적용)
$("tr:gt(6)").css("background", "lightgray");
// n번째 미만에 위치하는 객체 선택
$("tr:lt(7)").css("font-size", "1.5em");
// em은 부모 객체의 font size를 의미
// 특정 문자열을 포함하는 객체 선택
$("tr:contains('A형')").css("color", "red");
// 특정 태그를 가지고 있는 객체 선택
$("td:has(a)").css("color", "white");
// 선택자와 일치하지 않는 객체 선택
$("td:not(:contains('김김김'))").css("color", "lightgray");
});
</script>
</body>
</html>
앞의 선택자가 태그 이름과 선택자의 조합이었다면
필터링은 메소드 형태로 조건을 괄호로 받는다.
.filter(:odd) 와 같이..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>필터링 메소드</h1>
<h3>filtering 메소드의 사용법</h3>
<p>필터 선택자를 메소드 형태로 제공한다.</p>
<h4 class="test">test-1</h4>
<h4 class="test">test-2</h4>
<h4 class="test">test-3</h4>
<h4 class="test">test-4</h4>
<h4>test-5</h4>
<h4 class="test">test-6</h4>
<script type="text/javascript">
$(function() {
$("h4:even").css("background", "black").css("color", "white");
// filter() 메소드 사용
$("h4").filter(":even").css("background", "orangered").css("color", "white");
// 함수를 매개변수로 하는 filter() 메소드 사용
$("h4").filter(function(index) {
return index % 2 == 1;
}).css("background", "yellowgreen").css("color", "black");
// 선택된 요소 중 제일 처음에 있는 요소 리턴
$("h4").first().css("font-size", "1.5em");
// 선택된 요소 중 제일 마지막에 있는 요소 리턴
$("h4").last().text("마지막 요소");
// 인덱스 번호와 일치하는 요소만 리턴
$("h4").eq(3).text("eq()로 선택됨");
// 인자값과 일치하지 않는 요소만 리턴
$("h4").not(".test").css({"background":"yellow", "color":"black"});
});
</script>
</body>
</html>