jQuery의 find() 메서드는 이름이 낯설지 않지만, 자바스크립트의 find() 메서드와 혼동해서는 안 됩니다. 둘 다 무언가를 "찾는다"는 점은 같지만, 반환하는 결과는 상당히 다릅니다. 자바스크립트에서 find() 메서드는 배열에만 호출할 수 있으며, 콜백 함수(메서드에 인수로 전달되어 나중에 호출되는 함수)를 받아 조건을 만족하는 첫 번째 요소를 찾아 반환합니다.
반면 jQuery의 find() 메서드는 완전히 다르게 작동합니다. 모든 jQuery 메서드와 마찬가지로 셀렉터(selector)에 대해 호출되며, 해당 셀렉터 내부를 검색하고 그 하위(자식) 요소들만 조작합니다. 이러한 정교한 조작 방식은 동일한 부모 요소 안에 있는 여러 요소 중 일부만 변경하고 싶을 때 매우 유용합니다.
jQuery find() 사용법
jQuery find()는 주어진 셀렉터의 모든 자식 요소를 선택하는 데 사용됩니다. 예제 코드를 통해 jQuery find()의 사용법을 하나씩 살펴보겠습니다.
먼저 간단한 예제로 시작하고, 이후 섹션에서 점점 복잡한 예제를 다뤄보겠습니다. 페이지가 로드된 후 요소를 조작하면 find()가 어떻게 작동하는지 쉽게 확인할 수 있습니다. 페이지가 로드될 때 문장 안의 특정 단어 색상을 바꿔보는 건 어떨까요? 다음 코드로 시작해 보겠습니다:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="main"> <h2> jQuery find() method example </h2> <p> This is an example paragraph. </p> <p>We are going to change the color <span>blue</span> to the color blue.</p> <div class="green">We are going to change the word <span>green</span> to the color green.</div> <p> Every other will word will stay the same. </p> </div>
코드를 보면 <p> 요소 안에 몇 개의 <span> 요소가 있는 것을 알 수 있습니다. 하나의 <span>은 <p> 요소의 자식이고, 다른 <span>은 green 클래스를 가진 <div>의 자식입니다. 문장에서 설명했듯이, 우리는 <span>으로 감싸진 단어의 색상만 변경할 것입니다. 먼저 HTML이 어떻게 렌더링되는지 확인해 보겠습니다:
HTML이 정상적으로 렌더링되었습니다. 이제 텍스트 색상을 변경하여 find()가 실제로 작동하는 모습을 보여드리겠습니다. CSS 속성 하나만 변경하면 되기 때문에 초보자에게 아주 좋은 연습 과정입니다. <p> 요소를 셀렉터로 find()에 전달하면서, jQuery의 css() 메서드를 사용해 색상을 변경할 수 있습니다:
<script>
$(document).ready(() => {
$('p').find('span').css('color', 'blue');
$('div.green').find('span').css('color', 'green');
})
</script>
find()의 첫 번째 사용 예에서는 모든 <p> 요소를 선택합니다. find()를 사용해 <p>의 자식인 <span> 요소를 찾아냅니다. 이 예제에서는 'blue'라는 단어뿐입니다. 그런 다음 css() 메서드로 색상을 파란색으로 변경합니다.
이어서 두 번째 find() 사용 예를 보겠습니다. 이번에는 green 클래스를 가진 <div>를 선택하고 그 위에 find()를 호출합니다. 이 메서드는 <div>의 자식인 또 다른 <span> 요소를 찾아냅니다.
마찬가지로 이번에도 'green'이라는 단어뿐입니다. 첫 번째 줄과 같은 방식으로 css() 메서드를 사용해 색상을 초록색으로 변경합니다.
직접 실행해 보면 결과를 확인할 수 있습니다!
'blue'와 'green' 두 단어 모두 클래스나 id가 지정되지 않은 span 요소로 감싸져 있었지만, 그럼에도 두 단어를 정확히 분리해 각각 색상을 변경할 수 있었습니다. 짐작하셨겠지만, 그 이유는 <span>의 부모 요소가 서로 다르기 때문입니다.
<p>는 'blue' 단어를 감싼 <span>의 부모이고, <div class='green'>은 'green' 단어를 포함한 <span>의 부모입니다.
이런 동작이 가능한 이유는 find()가 셀렉터로 지정된 요소의 자식들을 찾기 때문입니다. 이제 좀 더 복잡한 예제로 할 일 목록(to-do list)을 살펴보겠습니다.
목록에서 jQuery find() 활용하기
이번 예제에는 할 일 목록이 있습니다. 오늘 해야 할 일들이 있고, 그 일들을 하려면 상점에서 물건을 사야 합니다. 물건을 구매하면 목록에서 해당 항목을 지우고 남은 하루를 보내면 됩니다! 목록은 다음과 같습니다:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
<li class="store">Go to the store
<ul>
<li>Trash bags</li>
<li>Dish Soap</li>
</ul>
</li>
<li>Take out the trash</li>
<Li>Wash the dishes</Li>
</ul>
</div>
여기서 <li> 요소들인 "상점에 가기", "쓰레기 버리기", "설거지하기"는 <ul> 요소의 자식이며, 이 <ul>은 id가 "main"인 <div>의 자식입니다. "상점에 가기" 목록 항목 안에는 상점에서 사야 할 물건들이 들어 있습니다. 오늘 집안일을 마치려면 쓰레기봉투와 주방세제가 필요합니다. 이 항목들은 store 클래스를 가진 <li>의 자식으로 중첩 목록(nested list) 형태로 배치했습니다.
이제 물건을 구매한 후 목록에서 해당 항목들을 지워보겠습니다:
<script>
$(document).ready(() => {
$('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
store 클래스를 가진 <li>를 선택하고 find()로 그 자식 <li> 요소들을 찾으면, 목록에서 해당 항목들에만 취소선을 그을 수 있습니다. 여기서도 jQuery css() 메서드를 사용해 "text-decoration" 속성에 "line-through" 값을 적용합니다. 그러면 선택된 항목에 취소선이 그어진 채로 화면에 표시됩니다:
마무리
jQuery find() 메서드는 전달된 셀렉터의 모든 자식 요소를 찾아냅니다. find() 메서드는 이러한 자식 요소들만 조작하며, 부모 요소 자체는 변경하지 않습니다.
어떤 자식 요소를 선택할지 구분할 수 있다면, 페이지의 전체 섹션을 한꺼번에 변경하는 포괄적인 작업도, 특정 요소만 골라 변경하는 세밀한 작업도 모두 가능합니다. 바로 이러한 유연성 덕분에 find()는 DOM 조작에서 가장 유용하게 쓰이는 메서드 중 하나로 자리 잡았습니다.
jQuery 학습 방법이 궁금하다면 관련 가이드를 참고해 보세요.