[Traversing] JQ - find() 메서드 ★★★ - 선택 요소의 자손요소 반환・찾기 (= find메서드 = 파인드메서드)

1,886

find() 예제

<style>

.hz * {

display: block;

border: 2px solid silver;

color: lightgray;

padding: 5px;

margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("ul").find("span").css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz" style="width:500px;">div

<ul>ul

<li>li

<span>span</span>

</li>

</ul>

</div>

결과보기

find() 정의

선택 요소의 자손 요소 반환.

1.

자손 요소 : 자식・손자・증손자 ....등등 하위 요소

2.

차이점 비교.

find()
DOM 요소의 자손을 따라 아래쪽으로 순회하며 마지막 자손까지 조회.

children()
DOM 요소의 자식 요소만 조회.
즉, 바로 아래 하위 요소만 조회.

filter()

find() 구문

$(selector).find(filter)

[매개변수]

filter
필수. 자손 검색을 필터링하는 선택자 표현식. (※ 요소 또는 jQuery 객체)

참고 : 여러 자손 요소 반환하려면, 각 표현식을 쉼표로 구분.

find() 예제 - 여러 지정 방법

<html> 요소의 모든 하위 요소 반환

$("html").find("*").css({"color": "red", "border": "2px solid red"});

<ul> 요소의 모든 하위 span 요소 반환

$("ul").find("span").css({"color": "red", "border": "2px solid red"});

<div> 요소의 하위 요소 중 .hz 클래스 가진 요소 반환

$("div").find(".hz").css({"color": "red", "border": "2px solid red"});

<body> 요소의 여러 자손 요소 반환. (※ 쉼표로 구분)

$("body").find("div,li,.first").css({"color": "red", "border": "2px solid red"});

<ul> 요소의 모든 하위 span 요소 (※ jQuery 컬렉션 객체 활용)

var $target = $("span");

$("ul").find($target).css({"color": "red", "border": "2px solid red"});

find() 예제 - 자손요소 태그명 표시

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

var hz = $("div").find("p, span").map(function(){

return this.tagName;}).get().join(", ");

$("div").after("<h2>" + hz + "<h2>");

});

</script>

<div>

<p>

<span>

<span></span>

</span>

</p>

</div>

결과보기