1. Description
| 매칭된 Element들 중에서 index보다 작은 Element들을 찾는다. 처음부터 찾기 시작하는 index는 0부터 시작하고, 마지막부터 찾기 시작하는 index는 -1부터 시작한다. |
| jQuery 3.4버전부터 Deprecated되었습니다. 대신 .slice()를 사용하세요. |
| jQuery(":lt(index)") : 첫 번째 Element부터 찾기 시작하고, 첫 번째 index는 0이다. |
| jQuery(":lt(-index)") : 마지막 Element부터 찾기 시작하고, 첫 번째 index는 -1이다. |
2. Example
| child#1-1 | child#1-2 |
| child#2-1 | child#2-2 |
| child#3-1 | child#3-2 |
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/lt</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 border="1">
<tr>
<td>child#1-1</td>
<td>child#1-2</td>
</tr>
<tr>
<td>child#2-1</td>
<td>child#2-2</td>
</tr>
<tr>
<td>child#3-1</td>
<td>child#3-2</td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find-first">#1. $("[name='_1q74-example-1'] td:lt(2)</button><br/>
<button name="btn-find-last">#2. $("[name='_1q74-example-1'] td:lt(-2)</button><br/>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var buttonContainer = $("[name='_1q74-example-bottom']");
var btnFindFromFirst = buttonContainer.find("[name='btn-find-first']");
var btnFindFromLast = buttonContainer.find("[name='btn-find-last']");
var elementsFormFirst = $("[name='_1q74-example-1'] td:lt(2)");
var elementsFormLast = $("[name='_1q74-example-1'] td:lt(-2)");
btnFindFromFirst.click(function() {
if(!elementsFormFirst.is("[style]")) {
elementsFormFirst.css("background", "#DC6614");
} else {
elementsFormFirst.removeAttr("style");
}
});
btnFindFromLast.click(function() {
if(!elementsFormLast.is("[style]")) {
elementsFormLast.css("border", "3px #3514DC dotted");
} else {
elementsFormLast.removeAttr("style");
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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: 170px;
}
[name="_1q74-example-1"] {
min-height: 140px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[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>4. File
[javascript][jquery][selector]lt.html
0.00MB
5. See also
useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/lt-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #42】Multiple Selector (“selector1, selector2, selectorN”) (0) | 2023.03.06 |
|---|---|
| 【jQuery/Selector #41】Multiple Attribute Selector [name=”value”][name2=”value2″] (0) | 2023.03.06 |
| 【jQuery/Selector #39】:last Selector (0) | 2023.03.06 |
| 【jQuery/Selector #38】:last-of-type Selector (0) | 2023.03.05 |
| 【jQuery/Selector #37】:last-child Selector (0) | 2023.03.05 |