1. Description
3.4버전부터 Deprecated되었다.
매치되는 Element들 중에서, 0으로 시작하는 인덱스의 n번째 Element를 선택한다.
:eq(index) : (첫 번째 Element부터 찾기 시작해서) index번째 Element를 선택한다.
:eq(-index) : (마지막 Element부터 찾기 시작해서) index번째 Element를 선택한다.
(1.8버전부터 추가되었다).
※ 3.4버전부터는 Selector로 사용하지 말고, 찾아진 Element들에 .eq()를 적용하세요.
2. Example
예제는 .eq()함수를 사용한다.
#1버튼을 클릭하면 <li>태그들 중, 두 번째 <li>태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.
#2버튼을 클릭하면 <p>태그들 중, 뒤에서 세 번째 <p>태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.
Empty or Not Empty?
- Empty Not!
Empty
[Find Not Empty]
[Find Empty]
[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/eq</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">
<h4>Empty or Not Empty?</h4>
<ul>
<li></li>
<li>Empty Not!</li>
<li></li>
<li></li>
</ul>
<p></p>
<p></p>
<p>Empty</p>
<p></p>
<p></p>
</div>
<div name="_1q74-example-bottom">
<br/>
<br/>
[Find Not Empty]<br/>
<button name="btn-notempty-find">#1. $("[name='empty-tags'] li").eq(1)</button><br/>
<br/>
[Find Empty]<br/>
<button name="btn-empty-find">#2. $("[name='empty-tags'] p").eq(-3)</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnNotEmptyFind = $("[name='btn-notempty-find']");
const btnEmptyFind = $("[name='btn-empty-find']");
const notEmptyTag = $("[name='_1q74-example-1'] li").eq(1);
const emptyTag = $("[name='_1q74-example-1'] p").eq(-3);
btnNotEmptyFind.click(function() {
if(!notEmptyTag.is("[style]")) {
notEmptyTag.css("background-color", "gray");
} else {
notEmptyTag.removeAttr("style");
}
});
btnEmptyFind.click(function() {
if(!emptyTag.is("[style]")) {
emptyTag.css("background-color", "pink");
} else {
emptyTag.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"] 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]eq.html
0.00MB
5. Reference
https://api.jquery.com/eq-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #23】:file Selector (0) | 2023.02.23 |
|---|---|
| 【jQuery/Selector #22】:even Selector (0) | 2023.02.23 |
| 【jQuery/Selector #20】:empty Selector (0) | 2023.02.23 |
| 【jQuery/Selector #19】:enabled Selector (0) | 2023.02.22 |
| 【jQuery/Selector #18】Element Selector (“element”) (0) | 2023.02.22 |