jQuery 자식요소 내 요소 선택

 

 

 

자식요소를 찾는 메소드로는 find()와 children()이 있습니다.
처음에 두가지 요소에 무슨 차이가 있는지 몰라서 그냥 두개를 하나씩 넣어서 되는걸 사용했던 1인입니다.

 

그런데 이제 알고보니
children() 메소드가 한단계 아래의 요소중에서 찾는다면
find()는 모든 자식 요소 내에서 찾는점이 다르다고 합니다.
(와..뭐..막..알듯말듯..계속 걍 번갈아 넣어볼 것 같은 느낌적인 느낌..)

<div class="btn">
	<p>1</p>
	<p>2</p>
</div>


<script type="text/javascript">
$('.btn').click(function() {
	$('.btn').find('p').addClass('on');
});
</script>

이렇게 스크립트를 쓰게되면 btn을 클릭했을때 btn 내부에 p를 찾아서 on 클래스를 추가해주라는 내용이 됩니다.

만약에 btn 클래스가 여러개 있고, 내가 클릭한 btn의 자식요소에만 영향을 주고싶다면 아래와 같이 써주세요.

 

<div class="btn">
	<p>1</p>
	<p>2</p>
</div>

<div class="btn">
	<p>1</p>
	<p>2</p>
</div>


<script type="text/javascript">
$('.btn').click(function() {
	$(this).find('p').addClass('on');
});