Javascript & JQuery & CSS

Javascript & JQuery & CSS > find() - 객체를 찾아라~~~

등록일 : 2017-07-04 19:59 조회수 : 53,512

jquery의 find 메소드는 원하는 클레스나 아이디를 찾는데 사용되는 메소드입니다.

이렇게만 말하면 $('.class')나 $('#id') 와 비슷하다고 생각 될 수 있으나 이 메소드의 강점은 지역 내부를 검색 하는데에 있습니다.

예를 들어 아래와 같은 html이 있다고 합시다.

     
		<div class="div1">  
			<div class="item1">item1</div>
			<div class="item2">item2</div>
		</div>

		<div class="div2">  
			<div class="item1">item1</div>
			<div class="item2">item2</div>
		</div>

		<div class="div3">  
			<div class="item1">item1</div>
			<div class="item2">item2</div> 
		</div>

이 경우에 div2의 item2를 선택해서 조작하려고 한다면 $(".div2 .item2") 와 같은 방법의 접근이 필요합니다.

하지만 find()를 사용하면 $(this).find(".item2") 와 같은 접근이 가능합니다. 혹은 그 부모를 선택하여 find() 하는 방법도 있습니다.

<ul> 내부의 <li> 중 마지막 <li>를 찾고 싶다면

$('ul).find('li:last');

와 같은 방법으로 접근도 가능합니다.

		$("#button1").click(function () {
			$('div').css('background','white');
			$('#A1').find('.child').css('background','red');
		});
 
		$("#button2").click(function () {
			$('div').css('background','white');
			$('#A2').find('.child').css('background','red');
		});
 
		$("#button3").click(function () {
			$('div').css('background','white');
			$('#A3').find('.child').css('background','red');
		});

find #A1 버튼을 클릭하게 되면

$('#A1').find('.child').css('background','red');

명령이 실행되는 걸 볼 수 있습니다. ID 가 A1 밑에 있는 모든 .child 클레스를 찾게 됩니다. (A1-1, A1-2, A2-1, A2-2, A3-1 , A3-2)

find #A2 버튼을 클릭하게 되면

$('#A2').find('.child').css('background','red');

명령이 실행되는 걸 볼 수 있습니다. ID 가 A2 밑에 있는 모든 .child 클레스를 찾게 됩니다. (A2-1, A2-2, A3-1 , A3-2)

find #A3 버튼을 클릭하게 되면

$('#A3').find('.child').css('background','red');

명령이 실행되는 걸 볼 수 있습니다. ID 가 A3 밑에 있는 모든 .child 클레스를 찾게 됩니다. (A3-1 , A3-2)

목록으로