1. Description
3.4버전부터 Deprecated되었고, .even()은 3.5.0이상의 버전부터 사용할 수 있다.
(0부터 시작하는 인덱스 기준)짝수번째 Element를 찾는다.
$(":even")처럼 사용하면 querySelectorAll()에서 제공하는 속도향상의 이점을 기대할 수 없으므로, 우선 CSS Selector를 사용한 후 .filter(":even")을 사용하는 것이 좋다고 한다.
※ 자세한 내용은 「5. Reference」를 참고하세요.
2. Example
#1버튼을 클릭하면 <tr>태그들 중, 짝수번째 <tr>태그를 찾아서 배경색을 변경한다. 버튼 클릭할 때마다 해당 스타일이 토글된다.
Even or Odd?
| 0. |
| 1. |
| 2. |
| 3. |
| 4. |
[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/even</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>Even or Odd?</h4>
<table border="1">
<tr>
<td style="width:200px;">0. </td>
</tr>
<tr>
<td style="width:200px;">1. </td>
</tr>
<tr>
<td style="width:200px;">2. </td>
</tr>
<tr>
<td style="width:200px;">3. </td>
</tr>
<tr>
<td style="width:200px;">4. </td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<br/>
<button name="btn-find">#1. $("[name='_1q74-example-1'] tr:even")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnFind = $("[name='btn-find']");
const pTags = $("[name='_1q74-example-1'] tr:even");
btnFind.click(function() {
pTags.each(function(i, el) {
const element = $(el);
const message = "Found it!!!";
if(!element.is("[style]")) {
element.css("background-color", "lightgreen")
element.find("td").text(element.find("td").text() + message);
} else {
element.removeAttr("style");
element.find("td").text(element.find("td").text().replace(message, ""));
}
});
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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"] > ol > li {
list-style-type: none;
}
[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]even.html
0.00MB
5. Reference
https://api.jquery.com/even-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector】universal selector ("*") (0) | 2023.02.23 |
|---|---|
| 【jQuery/Selector #23】:file Selector (0) | 2023.02.23 |
| 【jQuery/Selector #21】:eq() Selector (0) | 2023.02.23 |
| 【jQuery/Selector #20】:empty Selector (0) | 2023.02.23 |
| 【jQuery/Selector #19】:enabled Selector (0) | 2023.02.22 |