JavaScript/jQuery

【jQuery/Selector #49】:nth-of-type() Selector

1Q74 2023. 3. 14. 17:31

1. Description

jQuery(":nth-of-type(index/even/odd/equation)") : 각 부모의 태그명이 같은 자식 Element들 중에서 n번째 Element들을 모두 찾는다.
첫 번째 인덱스부터 1이 된다.

index : 1번부터 시작하는 index를 나타낸다.
even : 짝수 인덱스를 나타낸다.
odd : 홀수 인덱스를 나타낸다.
equation : even, odd, 3n+1과 같은 표현식을 나타낸다.

2. Example

#1버튼을 클릭하면 <span>태그들 중 첫 번째 Element를 찾아서 배경색을 변경한다.

#2버튼을 클릭하면 <div>태그들 중 두 번째 Element를 찾아서 배경색을 변경한다.

#3버튼을 클릭하면 <li>태그들 중 세 번째 Element를 찾아서 배경색을 변경한다.

#4버튼을 클릭하면 <h5>태그들 중 네 번째 Element를 찾아서 배경색을 변경한다.

버튼을 클릭할 때마다 스타일이 토글된다.

[1q74.tistory.com] javascript/jquery/selector/nth-of-type
child#1-1 child#1-2 child#1-3 child#1-3
child#2-1
child#2-2
child#2-3
child#2-4
  • child#3-1
  • child#3-2
  • child#3-3
  • child#3-4
    		•
    child#4-1
    child#4-2
    child#4-3
    child#4-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/nth-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">
			<table border="1">
				<tr>
					<td>
						<span>child#1-1</span>
						<span>child#1-2</span>
						<span>child#1-3</span>
						<span>child#1-3</span>
					</td>
				</tr>
				<tr>
					<td>
						<div>child#2-1</div>
						<div>child#2-2</div>
						<div>child#2-3</div>
						<div>child#2-4</div>
					</td>
				</tr>
				<tr>
					<td>
						<li>child#3-1</li>
						<li>child#3-2</li>
						<li>child#3-3</li>
						<li>child#3-4</li>
					</td>
				</tr>
				<tr>
					<td>
						<h5>child#4-1</h5>
						<h5>child#4-2</h5>
						<h5>child#4-3</h5>
						<h5>child#4-4</h5>
					</td>
				</tr>
			</table>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-nth-of-type-1">#1. $("[name='_1q74-example-1'] span:nth-of-type(1)")</button><br/>
			<button name="btn-nth-of-type-2">#2. $("[name='_1q74-example-1'] div:nth-of-type(2)")</button><br/>
			<button name="btn-nth-of-type-3">#3. $("[name='_1q74-example-1'] li:nth-of-type(3)")</button><br/>
			<button name="btn-nth-of-type-4">#4. $("[name='_1q74-example-1'] h5:nth-of-type(4)")</button>
		</div>
	</div>

	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>

<script>
var btnContainer = $("[name='_1q74-example-bottom']");
var btnChild1 = btnContainer.find("[name='btn-nth-of-type-1']");
var btnChild2 = btnContainer.find("[name='btn-nth-of-type-2']");
var btnChild3 = btnContainer.find("[name='btn-nth-of-type-3']");
var btnChild4 = btnContainer.find("[name='btn-nth-of-type-4']");

var child1 = $("[name='_1q74-example-1'] span:nth-of-type(1)");
var child2 = $("[name='_1q74-example-1'] div:nth-of-type(2)");
var child3 = $("[name='_1q74-example-1'] li:nth-of-type(3)");
var child4 = $("[name='_1q74-example-1'] h5:nth-of-type(4)");

btnChild1.click(function() {
	if(!child1.is("[style]")) {
		child1.css("background", "#AE5907");
	} else {
		child1.removeAttr("style");
	}
});

btnChild2.click(function() {
	if(!child2.is("[style]")) {
		child2.css("background", "#07AE3A");
	} else {
		child2.removeAttr("style");
	}
});

btnChild3.click(function() {
	if(!child3.is("[style]")) {
		child3.css("background", "#02764C");
	} else {
		child3.removeAttr("style");
	}
});

btnChild4.click(function() {
	if(!child4.is("[style]")) {
		child4.css("background", "#95A8E4");
	} else {
		child4.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", "&nbsp;&nbsp;"));
</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]nth-of-type.html
    0.00MB

    5. See also

    pseudo-class, useversal-selector, jquery-extensions

     

    first-of-type

     

    【jQuery/Selector #25】:first-of-type Selector

    1. Description 다른 부모Element 하위에 있는 있는 자식Element들 중에서 태그이름이 같은 첫 번째 요소를 찾는다. 2. Example #1버튼을 클릭하면 첫 번째 태그를 모두 찾아서 배경색을 변경한다. 버튼을 클

    1q74.tistory.com

     

    last-of-type

     

    【jQuery/Selector #38】:last-of-type Selector

    1. Description jQuery(":last-of-type") : 각 부모Element 하위의 마지막 자식Element들중 태그이름이 같은 것을 찾는다. 2. Example #1버튼을 클릭하면 하위의 마지막 Element를 찾아 배경색을 변경한다. 버튼을 클

    1q74.tistory.com

    6. Reference

    https://api.jquery.com/nth-of-type-selector/

     

     

     

    'JavaScript > jQuery' 카테고리의 다른 글

    【jQuery/Selector #51】:only-child Selector  (0) 2023.03.15
    【jQuery/Selector #50】:odd Selector  (0) 2023.03.15
    【jQuery/Selector #48】:nth-last-of-type() Selector  (0) 2023.03.14
    【jQuery/Selector #47】:nth-last-child() Selector  (0) 2023.03.14
    【jQuery/Selector #46】:nth-child() Selector  (0) 2023.03.14

    'JavaScript/jQuery'의 다른글

    • 현재글【jQuery/Selector #49】:nth-of-type() Selector

    관련글

    댓글

    티스토리툴바