jQuery find():단계별 가이드

jQuery find() 메소드가 친숙하게 들릴 수 있지만 JavaScript 메소드 find()!와 혼동하지 마십시오. 둘 다 물건을 "찾지만" 반환하는 내용이 상당히 다를 수 있습니다. JavaScript에서 find() 메서드는 배열에서만 호출할 수 있습니다.

메서드에 인수로 전달된 함수인 콜백 함수를 나중에 호출하기 위해 취합니다. 콜백 함수에 설명된 요구 사항을 충족하는 첫 번째 요소를 찾아 반환합니다.

jQuery find() 방식이 상당히 다릅니다. 모든 jQuery 메서드와 마찬가지로 선택기에서 호출됩니다. 해당 선택기 내에서 검색하고 해당 선택기의 자식 요소만 조작합니다. 이 높은 수준의 조작은 동일한 상위 요소에 포함된 다른 요소가 아닌 일부 요소를 변경하려는 경우에 유용합니다.

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>

이 코드를 보면

요소 내부에 몇 개의 요소가 있음을 알 수 있습니다. 요소 중 하나는

요소의 자식입니다. 다른 은 녹색 클래스를 가진

의 자식입니다. 단락에 나와 있는 것처럼 으로 래핑된 단어의 색상만 변경합니다. 그렇게 하기 전에 HTML이 렌더링되는지 확인하십시오.

HTML이 렌더링 중입니다. 이제 find()를 설명하기 위해 텍스트의 색상을 변경할 것입니다. 행동에. 이것을 달성하기 위해 하나의 CSS 속성만 변경하면 되기 때문에 이것은 훌륭한 초보자의 단계입니다.

요소를 find()에 선택자로 전달하는 동안 , jQuery의 css()를 사용할 수 있습니다. 색상 변경을 렌더링하는 방법:

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

find()의 첫 번째 사용에서 , 우리는 모든

요소를 선택하고 있습니다. find()를 사용합니다.

의 자식인 요소를 찾습니다. 이 예에서는 파란색이라는 단어만 있습니다. 그런 다음 css()를 사용합니다. 색상을 파란색으로 변경하는 방법입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

find()의 두 번째 사용법 . 이번에는 녹색 클래스로

를 선택하고 find()를 호출합니다. 그 위에. 이 메서드는

의 자식인 다른 요소를 찾고 있습니다.

다시 말하지만, 이것은 녹색이라는 단어일 뿐입니다. 첫 번째 줄과 마찬가지로 css()를 사용합니다. 색상을 녹색으로 변경하는 방법입니다.

실행하고 어떤 일이 일어나는지 봅시다!

파란색과 녹색이라는 단어는 클래스나 ID가 할당되지 않은 span 요소로 래핑되었습니다. 우리는 여전히 그 단어를 분리하고 색상을 변경할 수 있습니다. 짐작하셨겠지만 의 부모 요소가 다르기 때문입니다.

는 단어 blue의 의 부모입니다.

은 녹색이라는 단어를 포함하는 의 부모입니다.

이것은 find() 때문에 발생했습니다. 선택자로 사용된 요소의 자식을 찾습니다. 약간의 복잡성을 추가하고 할 일 목록의 예를 살펴보겠습니다.

목록의 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>

여기에 우리의 목록이 있습니다. id가 있는

의 자식인

요소가 있습니다. "메인"의. "가게로 가기" 목록 항목 안에는 상점에서 살 물건이 있습니다. 오늘 우리는 집안일을 끝내기 위해 쓰레기 봉투와 주방 세제가 필요합니다. 우리는 그것들을 store 클래스와 함께
에 자식으로 중첩 목록으로 넣었습니다.

이제 구매 후 목록에서 이러한 항목을 표시할 수 있습니다.
```
<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
```
상점 클래스와 함께
를 선택하고 find()를 사용하여 목록에 있는 항목만 지울 수 있습니다. 자식
요소를 찾습니다. 다시 말하지만 jQuery css()를 사용하고 있습니다. "text-decoration" 속성에 "line-through" 값을 적용하는 방법입니다. 이렇게 하면 선택한 항목이 그 사이를 통과하는 선으로 렌더링됩니다.

결론

jQuery find() 메서드는 전달된 선택기의 모든 자식 요소를 찾습니다. find() 메서드는 이러한 자식 요소만 조작하고 부모 자체는 조작하지 않습니다.

선택할 하위 요소를 구별할 수 있으므로 페이지의 전체 섹션을 일반적으로 변경하거나 페이지의 특정 요소만 변경할 수 있습니다. find()는 이러한 유연성 내에서 스스로를 가장 유용하게 만듭니다.

여기에서 jQuery를 배우는 방법에 대해 자세히 알아보세요.

jQuery find():단계별 가이드

jQuery find() 사용

목록의 jQuery find()

결론