여행을 개발하다
선택자 3 - 탐색 선택자 (위치 탐색 선택자) 본문
안녕하세요.
오늘은 지난 시간의 인접 관계 선택자에 이어
'탐색 선택자, 그 중에서도 위치 탐색 선택자'에 대해 포스팅하고자 합니다.
인접 관계 선택자들은 주로 부모와 형제, 상위와 하위, 형제 등으로 '요소 간 관계 위주'로 접근했었습니다.
선택자들이 가지고 오는 요소들은 '이전', '이전 요소들', '다음', '다음 요소들', 'A요소 이전', '모든 형제 요소'와 같이
범위의 개념이었죠.
하지만 불특정 '이전', '이후'의 요소들만을 다룬다면 정교한 선택에 제한이 걸릴 것이고,
이러한 한계점을 해결하기 위해 고안된 것이 탐색 선택자입니다.
이를 통해, 인접 관계 선택자 중에서도 '몇 번째 이전(형) 요소', '몇 번 째 다음(동생) 요소'와 같이
정교한 탐색을 통한 요소 선택이 가능합니다.
그럼 탐색 선택자, 그 중에서도 위치 탐색 선택자는 어떤 종류가 있으며,
어떻게 사용되는지 하나 둘씩 알아보겠습니다.
1. 위치 탐색 선택자의 종류
위치 탐색 선택자에는 다음과 같은 것들이 있습니다.
아래 표는 가볍게 한 번 훑어보시고, 밑의 예제에서 구체적으로 어떻게 사용되는지 살펴보겠습니다.
| 순번 | 선택자 종류 | 설명 |
| 1 |
$("요소").first() $("요소:first") |
전체 "요소" 중 첫 번째 것만 선택합니다. |
| 2 |
$("요소").last() $("요소:last") |
전체 "요소" 중 마지막 것만 선택합니다. |
| 3 | $("요소:odd") | "요소" 무리 중, 홀수 인덱스인 것만 선택합니다. |
| 4 | $("요소:even") | "요소" 무리 중, 짝수 인덱스인 것만 선택합니다. |
| 5 |
$("요소:first-of-type") |
"요소" 무리 중, 각 무리의 첫 번째 요소만 선택합니다. |
| 6 | $("요소:last-of-type") | "요소" 무리 중, 각 무리의 마지막 요소만 선택합니다. |
| 7 |
$("요소:nth-child(n)") |
부모 요소가 있는 "요소" 무리 중, n번째 요소만 선택합니다. |
| 8 |
$("요소:nth-child(숫자n)") |
부모 요소가 있는 "요소" 무리 중, "숫자" 배수번째 요소만 선택합니다. |
| 9 |
$("요소:nth-last-of-type(n)") |
"요소" 무리 중, 각 무리의 마지막에서 "n"번째 요소를 선택합니다. |
| 10 |
$("요소:only-child") |
부모 요소 내에, 자식 요소가 1개인 "요소"만 선택합니다. |
| 11 |
$("요소:eq(n)") $("요소").eq(n) |
"요소" 내에, 인덱스가 n인 것만 선택합니다. |
| 12 |
$("요소:lt(n)") |
"요소" 내에, 인덱스가 n 미만인 것만 선택합니다. |
| 13 |
$("요소:gt(n)") |
"요소" 내에, 인덱스가 n 초과인 것만 선택합니다. |
| 14 |
$("요쇼").slice(n) $("요쇼").slice(n, m) |
"요소" 내에, 인덱스 n부터 참조하는 요소를 선택합니다. "요소" 내에, 인덱스 n이상, m미만인 요소를 선택합니다. |
2. 예제
* 소스준비 *
실습을 위해 다음과 같은 구성으로 소스를 준비합니다.
① 2개의 목록형 태그 <ul>은 <li> 태그들을 자식 요소로 가지고 있는 부모 요소이다.
② 위치 탐색자들이 선택하는 요소들의 text를 id가 "result"인 텍스트 박스에 출력한다.
(아래의 소스는 탐색 선택자들의 특성에 따라 수정해서 사용한다.)
가장 주의해서 보셔야 할 것은 각 위치 탐색자들이 적용되는 범위입니다.
어느 상황에서 적용이 되고, 어느 상황에서 적용되지 않는지를 눈여겨 보시기 바랍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>selector_tragramming</title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
});
</script>
<body>
<input id="result" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
</ul>
</body>
</html>2-1. $("요소").first() or $("요소:first")
"요소"로 명시한 것들 중, 가장 처음에 등장한 요소를 선택합니다.
범위는 한 문서 내에 있는 모든 "요소"입니다.
아래의 코드는 "문서 내의 모든 <li> 태그 중, 가장 첫 번째 있는 <li> 태그의 텍스트 값을 가져온다"는 뜻입니다.
즉, 한 문서의 <body> 태그 내에 있는 <li> 전체에서 가장 첫 번째 것만을 가지고 옵니다.
$("#result").val($("li:first").text());
$("#result").val($("li").first().text());실행 결과, <input> 박스의 값에 text 값이 들어간 것을 확인할 수 있습니다.
두 가지 코드 모두 동일한 결과를 보여주므로 하나씩 테스트 해보세요.
2-2. $("요소").last() or $("요소:last")
"요소"로 명시한 것들 중, 가장 마지막에 등장한 요소를 선택합니다.
범위는 한 문서 내에 있는 모든 "요소"입니다.
아래의 코드는 "문서 내의 모든 <li> 태그 중, 가장 마지막에 있는 <li> 태그의 텍스트 값을 가져온다"는 뜻입니다.
즉, 한 문서의 <body> 태그 내에 있는 <li> 전체에서 가장 마지막에 있는 요소만을 가지고 옵니다.
$("#result").val($("li:last").text());
$("#result").val($("li").last().text());실행 결과, <input> 박스의 값에 text 값이 들어간 것을 확인할 수 있습니다.
2-3. $("요소:odd") or $("요소:even")
"요소"로 명시한 것들 중, 각각 홀수 번째 인것(odd)과 짝수 번째 인것(even)을 선택합니다.
범위는 한 문서 내에 포함된 "요소" 전체입니다.
여기서 주의할 것은 "번째"에서 인덱스는 1이 아니라 0부터 시작한다는 것입니다.
아래 코드에서 tag1은 0번 인덱스, tag2는 1번 인덱스...
이렇게 이해하시면 됩니다.
<ul>
<li>tag1</li> <!-- 0번 인덱스 -->
<li>tag2</li> <!-- 1번 인덱스 -->
<li>tag3</li> <!-- 2번 인덱스 -->
<li>tag4</li> <!-- 3번 인덱스 -->
<li>tag5</li> <!-- 4번 인덱스 -->
<li>tag6</li> <!-- 5번 인덱스 -->
<li>tag7</li> <!-- 6번 인덱스 -->
</ul>
<ul>
<li>tag8</li> <!-- 7번 인덱스-->
<li>tag9</li> <!-- 8번 인덱스-->
<li>tag10</li> <!-- 9번 인덱스-->
<li>tag11</li> <!-- 10번 인덱스-->
<li>tag12</li> <!-- 11번 인덱스-->
<li>tag13</li> <!-- 12번 인덱스-->
<li>tag14</li> <!-- 13번 인덱스-->
</ul>그렇다면 홀수 번째, 짝수 번째 인덱스를 가진 <li> 태그들의 text 값을 가져와보겠습니다.
$("#result").val($("li:odd").text());
$("#result").val($("li:even").text());
2-4. $("요소:first-of-type") or $("요소:last-of-type")
"요소" 무리 중 가장 첫 번째 요소와 마지막 요소를 가지고 옵니다.
여기서 요소 무리란, 한 부모 요소 아래에 있는 형제 요소들이거나 부모 요소가 없는 무리인 경우를 포함합니다.
이 선택자는 first() 및 last() 선택자와 혼동하기 매우 쉬우므로 주의하셔야 합니다.
조금 어렵게 느끼셨나요?
비교를 위해 <input>박스를 하나 더 추가할께요.
구성을 살펴보면 <ul> 태그를 부모요소로 가지고 오는 요소 무리 (tag1~tag7), 일반 요소 무리(tag8~tag14),
또 다른 <ul> 태그를 부모요소로 가지고 있는 tag15가 있습니다.
결국 <li> 태그들이 3개의 무리 요소로 구분이 되어 있네요.
<input id="result" type="text">
<input id="result1" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
<ul>
<li>tag15</li>
</ul>
그리고 다음의 코드를 실행시켜 보겠습니다.
$("#result").val($("li:first").text());
$("#result1").val($("li:first-of-type").text());아래의 첫 번째 <input> 태그의 값이 '$("#result").val($("li:first").text())' 의 실행 결과,
아래의 두 번째 <input> 태그의 값이 '$("#result1").val($("li:first-of-type").text())'의 실행 결과 값입니다.
이는 요소의 무리 요소들 중, 첫 번째 요소들만 가지고 온 결과입니다.
last-of-type 선택자는 그 정반대, 요소의 무리들 중 마지막 요소만 가지고 오는 선택자입니다.
2-5. $("요소:nth-child(n)") or $("요소:nth-child(숫자n)")
"요소" 무리 중 n번째 자식 요소만 가지고 오거나 '숫자 * n' 번째 자식 요소만 가져오는 선택자입니다.
선택자의 이름에서 눈치 채신 분들도 있겠지만, 부모 아래 있는 요소들에 적용할 때 정확한 사용이 가능합니다.
소스는 위에서 썼던 것을 조금 바꾸어서 사용해볼께요.
<input id="result" type="text">
<input id="result1" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
</ul>그리고 다음의 코드를 실행시켜 보겠습니다.
(보다 정확한 탐색을 위해서 'ul li'로 명시해줬습니다.)
$("#result").val($("ul li:nth-child(3)").text());
$("#result1").val($("ul li:nth-child(4)").text()); 아래의 첫 번째 <input> 태그의 값이 $("#result").val($("ul li:nth-child(3)").text())의 실행 결과,
아래의 두 번째 <input> 태그의 값이 $("#result").val($("ul li:nth-child(4)").text())의 실행 결과 값입니다.
<ul> 태그 아래 있는 <li> 태그 중, 각각 3번째, 4번째 요소를 가지고 옵니다.
부가적으로 n대신 변수를 사용하셔도 됩니다.
child()의 인수에 'odd'라고 쓸 경우 홀수 인덱스인 자식 요소만, 'even'이라고 쓸 경우 짝수 인덱스인 자식 요소만,
'3n+1'이라고 쓸 때는 '4, 7, 10...' 인덱스인 자식 요소만 선택합니다.
(참고로 '3n+1'과 같이 수식을 적용하여 쓸 경우, 변수 n에는 0, 1, 2.. 의 값이 순서대로 대입됩니다.)
단, 자식 요소의 갯수를 초과하는 인덱스를 입력할 경우에 해당 요소들은 가져오지 못합니다.
(자식 요소가 총 7개인데, 인덱스를 8로 입력하는 경우)
2-6. $("요소:nth-last-of-type(n)")
"요소" 무리 중, 뒤에서 n번째 요소만 가지고 옵니다.
여기서 요소 무리란, 한 부모 요소 아래에 있는 형제요소들이거나 부모 요소가 없는 무리인 경우를 포함합니다.
어떻게 보면 $("요소:first-of-type") 혹은 $("요소:last-of-type")와 같은 맥락에서 사용되므로,
아래의 소스 역시 해당 선택자들을 설명할 때 사용했던 것을 조금만 바꿔서 사용할께요.
<input id="result" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
<ul>
<li>tag15</li>
</ul>그리고 다음의 코드를 실행시켜 보겠습니다.
$("#result").val($("li:nth-last-of-type(1)").text()) 실행 결과 2개의 <ul> 아래 요소 무리, 1개의 별도 <ul> 무리로 도합 3개의 <li> 무리가 인식되고,
각 무리의 마지막 요소에 해당하는 tag7, tag14, tag15가 선택됩니다.
부가적으로, 요소 무리의 마지막에서 n번째 요소가 없을 때는 해당 요소를 가져오지 못합니다.
$("#result").val($("li:nth-last-of-type(3)").text()) 즉, 위와 같은 코드를 실행시켰을 때, 1개의 요소로 이루어진 <li> 무리들에서는 해당 요소를 찾을 수 없다는 거죠.
<ul>
<li>tag15</li>
</ul>
2-7 . $("요소:only-child")
부모 요소 내, "요소"가 단 하나일 경우 해당 요소를 가져옵니다.
'$("요소:nth-last-of-type(n)")'의 소스를 그대로 가져오면,
<input id="result" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
<ul>
<li>tag15</li>
</ul>자식 요소를 가지고 있는 2개의 <ul> 태그 중,
자식 요소로 <li> 태그를 단 하나만 가지고 있는 요소 그룹은 'tag15'를 포함하고 있는 것입니다.
<ul>
<li>tag15</li>
</ul>다음 코드를 실행해서 결과 값을 가져오면,
$("#result").val($("li:only-child").text())'tag15'만 정상적으로 출력됩니다.
2-8. $("요소:eq(n)") or $("요소").eq(n)
'eq'는 'equals'을 의미하며, "요소" 무리 중 인덱스가 n인 요소를 가져옵니다.
인덱스는 0부터 시작하며, 범위는 문서 전체입니다.
따라서, 요소 무리가 어떤 부모 밑에 있는가 혹은 부모 밑에 있는가는 상관하지 않습니다.
예를 들어, 다음과 같은 코드가 있다고 가정합시다.
이 경우, 문서 내의 <li> 태그는 총 15개입니다.
<input id="result" type="text">
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
<li>tag4</li>
<li>tag5</li>
<li>tag6</li>
<li>tag7</li>
</ul>
<li>tag8</li>
<li>tag9</li>
<li>tag10</li>
<li>tag11</li>
<li>tag12</li>
<li>tag13</li>
<li>tag14</li>
<ul>
<li>tag15</li>
</ul>여기서 인덱스가 12인 요소를 선택하여 출력해보겠습니다.
'tag1'을 0번 인덱스로, 12번째 인덱스인 'tag13'이 정상적으로 출력됩니다.
(아래의 코드들은 모두 같은 기능을 합니다.)
$("#result").val($("li:eq(12)").text())
$("#result").val($("li").eq(12).text())
2-9. $("요소:lt(n)") or $("요소:gt(n)")
'lt'는 'less than'을 의미하며, 'gt'는 'greater than'을 의미합니다.
"요소" 무리 중 인덱스가 각각 n보다 작은 요소들을 가져오거나, 인덱스가 n보다 큰 요소들을 가져올 때 사용합니다.
인덱스는 0부터 시작하며, 적용범위는 $("요소:eq(n)")과 동일합니다.
$("요소:eq(n)")과 동일한 소스로 다음 코드를 순차적으로 테스트합니다.
참고로 <li> 태그 중, 인덱스가 5인 것은 'tag6'입니다.
$("#result").val($("li:lt(5)").text());
$("#result").val($("li:gt(5)").text());
'$("#result").val($("li:lt(5)").text())'의 실행 결과, 'tag1 ~ tag5'가 선택되었습니다.
'$("#result").val($("li:gt(5)").text())'의 실행 결과, 'tag7 ~ tag15'가 선택되었습니다.
2-10. $("요쇼").slice(n) or $("요쇼").slice(n, m)
일치하는 "요소" 중에 일부분만 선택하는 선택자입니다.
인수는 하나만 넣을 수도 있고, 두 개를 넣을 수도 있습니다.
예를 들어, slice(5)라고 하면 일치하는 요소들 중, 인덱스가 5인 요소들부터 가지고 옵니다.
slice(2,5)처럼 인수가 2개라면, 일치하는 요소들 중, 인덱스 2이상 5미만인 요소들만 가져옵니다.
다음 코드를 순차적으로 테스트해보겠습니다.
$("#result").val($("li").slice(5).text());
$("#result").val($("li").slice(2, 5).text());
지금까지 제이쿼리의 '탐색 선택자, 그 중에서도 위치 탐색 선택자'에 대해 알아보았습니다.
감사합니다.
'FrontEnd > JQuery' 카테고리의 다른 글
| 선택자 2 - 기본 선택자 (인접관계 선택자) (0) | 2019.06.07 |
|---|---|
| 선택자 1 - 기본 선택자 (직접 선택자) (0) | 2019.06.06 |
| $(document).ready(function(){}) (0) | 2019.05.31 |
