본문 바로가기
JavaScript & JQuery

[JQuery] find를 이용하여 하위 요소 class 찾기

by 무사뎀벨레 2022. 12. 15.

 

 

 

 

 

 

find 메소드


find 메소드는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다.

 

 

 

 

 

 

사용 예시


아래 코드와 같이, aaa라는 id값을 가지고 있는 요소에서 find메소드를 사용하여 class_123이라는 클래스의 value값을 구할 수 있습니다.

<div id="aaa">
    <p>
        <input type="text" class="class_123" value="abcdefg"/>
    </p>
</div>


<script>
	var result = $("#aaa").find('.class_123').val();
    	console.log(result);
</script>

 

 

또한, find로 찾은 하위 요소에 다양한 속성을 추가할 수 있습니다.

<div id="aaa">
    <p>
        <input type="text" class="class_123" value="abcdefg"/>
    </p>
</div>


<script>
	//선택된 하위 요소에 css요소 추가
	var result = $("#aaa").find('.class_123').css( 'font-size', '2em');
</script>

 

 

 

 

 

 

주의할 점


find() 메소드는 하위 요소를 모두 찾기 때문에,  하위 요소의 개수가 많다면 찾는 속도가 오래 걸려 페이지 로딩이 느려질 수 있습니다.

반응형

댓글