반응형
SMALL
📌 .find()란?
jQuery.find() 메서드는 선택한 요소 내부에서 특정 자식 요소를 찾는 기능을 합니다. 이 메서드는 모든 하위 요소(손자, 증손자 포함) 중에서 특정 요소를 검색할 때 사용됩니다.
✅ 기본 문법
$(selector).find("child-selector");- selector : 검색할 부모 요소
- child-selector : 찾고 싶은 하위 요소의 선택자
- 반환값 : 해당하는 하위 요소의 jQuery 객체
📌 .find() 실용 예제 10가지
1️⃣ 특정 부모 요소 내부의 모든 <span> 찾기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>find demo</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$( "p" ).find( "span" ).css( "color", "red" );
</script>
</body>
</html>✅ 설명: <p> 내부의 모든 <span> 요소를 찾아 글자색을 빨간색으로 변경합니다.
2️⃣ 리스트 내부의 .active 클래스가 있는 항목 찾기
<ul>
<li>첫 번째 항목</li>
<li class="active">두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<script>
$("ul").find("li.active").css("background", "yellow");
</script>✅ 설명: <ul> 내부에서 active 클래스를 가진 <li> 요소의 배경색을 노란색으로 변경합니다.
3️⃣ 테이블에서 특정 셀 찾기
<table>
<tr><td>첫 번째 셀</td><td>두 번째 셀</td></tr>
<tr><td>세 번째 셀</td><td>네 번째 셀</td></tr>
</table>
<script>
$("table").find("td:nth-child(2)").css("font-weight", "bold");
</script>✅ 설명: <table> 내부에서 두 번째 <td> 요소의 글씨를 굵게 표시합니다.
4️⃣ 특정 div 내부의 <a> 태그 찾기
<div id="links">
<a href="#">Home</a>
<a href="#" target="_blank">Blog</a>
</div>
<script>
$("#links").find("a[target='_blank']").css("color", "green");
</script>✅ 설명: #links 내부의 <a> 태그 중 target="_blank" 속성을 가진 요소의 글자색을 초록색으로 변경합니다.
5️⃣ 폼 내부의 입력 필드 찾기
<form>
<input type="text" name="name">
<textarea name="message"></textarea>
</form>
<script>
$("form").find("input, textarea").css("border", "1px solid red");
</script>✅ 설명: <form> 내부의 <input> 및 <textarea> 요소에 빨간색 테두리를 추가합니다.
6️⃣ 특정 조건을 만족하는 <li> 요소 찾기
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<script>
$("ul").find("li").filter(function() {
return $(this).text().length > 5;
}).css("background", "lightblue");
</script>✅ 설명: <ul> 내부의 <li> 요소 중 글자가 5자 이상인 항목만 배경색을 연한 파란색으로 변경합니다.
7️⃣ data- 속성이 있는 요소 찾기
<div id="container">
<div data-role="admin">관리자</div>
<div>일반 사용자</div>
</div>
<script>
$("#container").find("[data-role]").css("border", "2px solid orange");
</script>✅ 설명: #container 내부의 data-role 속성을 가진 요소에 주황색 테두리를 추가합니다.
8️⃣ 네비게이션 메뉴에서 활성화된 메뉴 항목 찾기
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
</ul>
<script>
$(".menu").find("li.active a").css("text-decoration", "underline");
</script>✅ 설명: .menu 내부에서 active 클래스를 가진 <li> 안의 <a> 태그를 찾아 밑줄을 추가합니다.
9️⃣ modal 내부의 닫기 버튼 찾기
<div id="modal">
<button class="close">닫기</button>
</div>
<script>
$("#modal").find("button.close").on("click", function() {
$("#modal").hide();
});
</script>✅ 설명: #modal 내부의 .close 버튼을 클릭하면 #modal이 숨겨집니다.
📌 마무리 🎯
- .find()는 특정 요소 내부에서 원하는 하위 요소를 선택하는 필수 메서드
- CSS 스타일 적용, 이벤트 바인딩, 특정 조건을 만족하는 요소 검색 등에 유용
- .children()과 차이를 이해하고 올바르게 사용해야 함
🚀 이제 .find()를 활용해 동적인 웹 페이지를 만들어 보세요!
반응형
LIST