1. Description
3.4버전부터 Deprecated되었다.
매칭된 Element들 중에서 주어진 인덱스보다 더 큰 인덱스의 Element들을 찾는다.
:gt()처럼 사용하던 것을 선행하는 Selector와 조합하여 사용한 다음 .slice()를 사용하는 것으로 대신할 수 있다.
※ jQuery1.8 이전 버전은 :gt(-index)가 지원되지 않는다.
2. Usage
- jQuery(":gt(index)") : 첫 번째 Element부터 찾는다. 첫 번째 Element의 인덱스는 0이다.
- jQuery(":gt(-index)") : 마지막 Element부터 찾는다. 마지막 Element의 인덱스는 -1이다.
3. Example
#1버튼을 누르면 처음부터 세 번째로 시작하는 <td>태그들의 border스타일을 변경한다.
#2버튼을 누르면 뒤에서부터 두 번째로 시작하는 <td>태그들의 border스타일을 변경한다.
※ 버튼을 클릭할 때마다 border스타일을 초기화한 다음 border스타일을 적용한다.
| Amazon | ||
| Tesla | Netflex |
[HTML Code]
[//HTML Code]
4. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/gt</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<table name="bigtech" border="1">
<tr>
<td>Google</td>
<td>Amazon</td>
<td>Facebook</td>
</tr>
<tr>
<td>Tesla</td>
<td>Twitter</td>
<td>Netflex</td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-plus-find">#1. $("[name='bigtech']") td:gt(1)</button>
<button name="btn-minus-find">#2. $("[name='bigtech']") td:gt(-3)</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnPlusFind = $("[name='btn-plus-find']");
const btnMinusFind = $("[name='btn-minus-find']");
const bigtech = $("[name='bigtech'] td");
const plusTags = $("[name='bigtech'] td:gt(1)");
const minusTags = $("[name='bigtech'] td:gt(-3)");
btnPlusFind.click(function() {
bigtech.removeAttr("style");
plusTags.css("border", "3px dashed blue");
});
btnMinusFind.click(function() {
bigtech.removeAttr("style");
minusTags.css("border", "3px dashed green");
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name="_1q74-example-root"] {
min-height: 150px;
}
[name="_1q74-example-1"] {
min-height: 80px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>5. File
[javascript][jquery][selector]gt.html
0.00MB
6. See Also
pseudo-class, useversal-selector, jquery-extensions
7. Reference
https://api.jquery.com/gt-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #30】:has() Selector (0) | 2023.03.04 |
|---|---|
| 【jQuery/Selector #29】Has Attribute Selector [name] (0) | 2023.03.04 |
| 【jQuery/Selector #27】:focus Selector (0) | 2023.02.24 |
| 【jQuery/Selector #26】:first Selector (0) | 2023.02.24 |
| 【jQuery/Selector #25】:first-of-type Selector (0) | 2023.02.24 |