[jQuery] 하위 요소 찾는 find() 함수 사용법, 예제 (스타일 변경, 이벤트 추가)

아래 소스 코드는 find() 함수를 사용해서 HTML 요소를 선택해 스타일을 변경하고, 이벤트를 추가하는 예시입니다.

 

find() 함수

특정 요소 내에서 하위 요소를 검색하는 함수입니다. 선택한 요소의 하위 요소 중에서 특정 조건을 만족하는 요소를 찾을 수 있습니다.

 

$(selector).find(childSelector)

ㅇ $(selector): 상위 요소를 선택하는 선택자입니다. 선택자에 해당하는 요소 내에서 하위 요소를 검색합니다.
ㅇ childSelector: 상위 요소 내에서 찾고자 하는 하위 요소를 선택하는 선택자입니다.

 

소스코드

ㅇ HTML 구조

<div id="parent">
  <p>parent 첫번째 P 태그</p>
  <p>parent 두번째 P 태그</p>
  <div class="child">
    <p>child class P 태그</p>
    <p>child class P 태그</p>
    <p>child class P 태그</p>
  </div>
</div>

 

 

ㅇ SCRIPT

var elementsToChange = $('#parent').find('p:contains("두번째")');
elementsToChange.css('color', 'red');

#parent 요소 아래에서 "두번째"를 포함한 텍스트를 가진 모든 p 태그를 선택하고, 이들의 글자 색을 빨간색으로 변경합니다.

 

var children = $('#parent').find('.child');
children.css({
  'background-color': 'yellow',
  'border': '2px solid red'
});

위 소스 코드는 #parent 요소 아래에서 .child 클래스를 가진 모든 요소들을 선택하고, 이들의 배경색을 노란색으로 변경하고 2px 빨간 테두리를 추가합니다.

 

children.click(function() {
  var newParagraph = $('<p>클릭으로 추가된 하위 요소</p>');
  $(this).append(newParagraph);
  
  newParagraph.click(function() {
    $(this).css('color', 'blue');
  });
});

.child 클래스를 가진 요소들에 대해 클릭 이벤트를 추가합니다. 클릭할 때마다 새로운 p 태그가 추가되며, 이 새로운 p 태그를 클릭하면 글자 색이 파란색으로 변경됩니다.

 

var secondChildParagraph = $('#parent').find('.child').find('p:eq(1)');
secondChildParagraph.css('font-weight', 'bold');

.child 클래스를 가진 요소 내의 두 번째 p 태그를 선택하고, 해당 p 태그의 글자 굵기를 두껍게 변경합니다.

 

---

ㅇ 전체 소스 코드

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
	var elementsToChange = $('#parent').find('p:contains("두번째")');
	elementsToChange.css('color', 'red');

	var children = $('#parent').find('.child');	
	// 찾은 모든 하위 요소에 대해 CSS 스타일을 수정
	children.css({
		'background-color': 'yellow',
		'border': '2px solid red'
	});
	
	children.click(function() {
		var newParagraph = $('<p>클릭으로 추가된 하위 요소</p>');
		$(this).append(newParagraph);
		
		newParagraph.click(function() {
		  $(this).css('color', 'blue');
		});
	});
	
	//child class의 두 번째 p 태그에 대한 작업을 수행합니다.
	var secondChildParagraph = $('#parent').find('.child').find('p:eq(1)');
	secondChildParagraph.css('font-weight', 'bold');
});
</script>
<div id="parent">
  <p>parent 첫번째 P 태그</p>
  <p>parent 두번째 P 태그</p>
  <div class="child">
    <p>child class P 태그</p>
	<p>child class P 태그</p>
	<p>child class P 태그</p>
  </div>
</div>

 

소스코드 결과

 

참고링크

[jQuery] 상위 요소 찾는 closest() 함수 사용법, 예제 (스타일 변경, 이벤트 추가)