1. Description
다른 부모Element 하위에 있는 있는 자식Element들 중에서 태그이름이 같은 첫 번째 요소를 찾는다.
2. Example
#1버튼을 클릭하면 첫 번째 <li>태그를 모두 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.
- Amazon
- Tesla
- Netflex
- Apple
- A
- B
- A1
- B1
- C1
- D2
- E2
- F2
[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/first-of-type</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">
<ol name="bigtech">
<li>Google</li>
<li>Amazon</li>
<li>Facebook</li>
<ol>
<li>Tesla</li>
<li>Twitter</li>
<li>Netflex</li>
</ol>
<li class="apple">Apple</li>
</ol>
<div name="smalltech">
<ol>
<li>A</li>
<li>B</li>
</ol>
<div name="tech1">
<ol>
<ol>
<li>A1</li>
<li>B1</li>
<li>C1</li>
</ol>
</ol>
<ol>
<li>D2</li>
<li>E2</li>
<li>F2</li>
</ol>
<li class="apple">Apple</li>
</div>
</div>
</div>
<div name="_1q74-example-bottom">
<br/>
<br/>
<button name="btn-find">#1. $("[name='_1q74-example-1'] li:first-of-type")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnFind = $("[name='btn-find']");
const firstOfType = $("li:first-of-type");
btnFind.click(function() {
firstOfType.each(function(index, el) {
const isNotSetBackgroundColor = ($(el).css("background-color") === "rgba(0, 0, 0, 0)");
if(isNotSetBackgroundColor) {
$(el).css("background-color", "lightcoral");
} else {
$(el).css("background-color", "");
}
});
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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]first-of-type.html
0.00MB
5. See also
pseudo-class, useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/first-of-type-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #27】:focus Selector (0) | 2023.02.24 |
|---|---|
| 【jQuery/Selector #26】:first Selector (0) | 2023.02.24 |
| 【jQuery/Selector #24】:first-child Selector (0) | 2023.02.23 |
| 【jQuery/Extensions】jQuery Extensions (0) | 2023.02.23 |
| 【jQuery/Selector】universal selector ("*") (0) | 2023.02.23 |