[jQuery] .find()

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .find() 사용법

jQuery의 find() 메서드는 선택한 요소의 하위 요소들 중에서

지정한 선택자와 일치하는 모든 요소들을 찾습니다.

find() 메서드는 선택한 요소의 하위 요소들 중에서만 검색을 수행하므로,

문서 전체에서 검색하는 것보다 더 빠르게 검색할 수 있습니다.

 

find() 함수는 다음과 같은 구문을 사용합니다.

$("selector").find("filter");

여기서 'selector'는 선택한 요소를 나타내는 CSS 선택자입니다. 
'filter'는 선택한 요소에서 찾을 하위 요소를 선택하기 위한 선택자입니다. 
'filter'는 선택사항이며, 지정하지 않으면 선택한 요소의 모든 하위 요소를 선택합니다.

 

find() 함수는 선택자에 맞는 모든 하위 요소를 선택하기 때문에 반환 값은 배열 형태이며, 
일치하는 요소가 없으면 빈 배열을 반환합니다.

 

예를 들어, 'div' 요소의 하위 요소 중에서 'p' 요소를 찾기 위해서는 

다음과 같은 코드를 사용할 수 있습니다.

$("div").find("p");

이 코드는 'div' 요소의 모든 하위 요소 중에서 'p' 요소를 선택하여 반환합니다.

아래는 find() 메서드를 사용한 간단한 예제 코드입니다.

// javascript code
// .parent 요소 안에 있는 .child 요소를 모두 선택
var children = $(".parent").find(".child");

// 선택된 요소들의 텍스트를 변경
children.text("바뀐 텍스트");

// html code
<div class="parent">
  <span class="child">첫 번째 자식 요소</span>
  <span class="child">두 번째 자식 요소</span>
  <span class="child">세 번째 자식 요소</span>
</div>

위 코드에서는 find() 메서드를 사용하여 .parent 요소 안에 있는

모든 .child 요소를 선택하고, 이를 'children' 변수에 할당합니다.

그리고 text() 메서드를 사용하여 선택된 요소들의 텍스트를 변경합니다.

 

find() 메서드는 선택자를 통해 찾고자 하는 요소들을 지정할 수 있으며,

선택된 요소의 하위 요소를 쉽게 찾을 수 있습니다.

또한 find() 함수를 사용하면 중첩된 요소에서 원하는 요소를 빠르게 찾을 수 있어서 유용합니다