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.
차이점 비교.children()
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>
</p>
</div>
결과보기
