고정 헤더 영역
상세 컨텐츠
본문
.children( [selector ] )
- 설명 : selector 와 일치하는 요소 집합에서 각 요소의 자식을 가져옴
DOM 요소 집합을 나타내는 jQuery 객체가 주어지면 .children () 메서드를 사용하면 DOM 트리에서 이러한 요소의 자식을 검색하고 일치하는 요소에서 새 jQuery 객체를 생성 할 수 있습니다.
.children () 메서드는 .children ()이 DOM 트리 아래로 단일 수준 만 이동하는 반면 .find ()는 하위 요소 (손자 등)를 선택하기 위해 여러 수준을 탐색 할 수 있다는 점에서 .find ()와 다릅니다. 또한 대부분의 jQuery 메서드와 마찬가지로 .children ()은 텍스트 노드를 반환하지 않습니다. 텍스트 및 주석 노드를 포함한 모든 자식을 얻으려면 .contents ()를 사용하길 바랍니다.
아래 jsfiddle 에서 예제를 실행해보고 학습해보도록 합시다.
JSFiddle - Code Playground
jsfiddle.net
1) 예제
<!DOCTYPE html>
<head>
<title>jquery test 1</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
</body>
<script>
$("ul.level-2").children().css("background-color", "red");
</script>
</html>
2) 예제
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>children demo</title>
<style>
body {
font-size: 16px;
font-weight: bolder;
}
span {
color: blue;
}
p {
margin: 5px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello (this is a paragraph)</p>
<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>
<div>And One Last <span>Time</span> (most text directly in a div)</div
<script>
$( "div" ).children().css( "border-bottom", "3px double red" );
</script>
</body>
</html>
3) 예제
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>children demo</title>
<style>
body {
font-size: 16px;
font-weight: bolder;
}
p {
margin: 5px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>
$( "div" ).children( ".selected" ).css( "color", "blue" );
</script>
</body>
</html>
< 자료출처 : api.jquery.com
'자바스크립트 > jquery' 카테고리의 다른 글
| Jquery Form Serialize Disabled 컨트롤 넘기는 방법 (0) | 2021.03.24 |
|---|---|
| [JQuery] input 객체 - readonly, disabled 처리 (0) | 2021.03.24 |
| jQuery.merge(first, second) Returns:Array (0) | 2021.02.09 |
| jQuery.map() (0) | 2021.02.08 |
| .attr() (0) | 2021.02.03 |
댓글 영역