[jQurey] 자식 요소 선택방법 및 찾기, Children()

 

 

제이쿼리를 사용하여 간단하게 자식요소를 선택하는 방법을 알아보려고 합니다. 자식요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다.

 

# 제이쿼리 children() 자식요소 얻기위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올 수 있다는 점이 차이점입니다. 그럼 children()의 간단한 사용방법은 아래와 같습니다.

$(element).children(option)

괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다.

! children() 옵션 사용하여 찾기 예제보기

 

아래는 red라는 클래스명을 가진 자식 요소만 찾아서 반환합니다.

 

@ children.html

<div>
  <span class="red">1 child element</span>
  <span class="blue">2 child element</span>
</div>

 

@ children.js

$('body').children('.red');
// red 클래스명의 자식요소를 찾아 반환

 

 

위 코드를 실행하면 red 클래스를 가진 요소만 선택됩니다. 그럼 아래에서 다른 방법의 예제를 알아보세요.

 

 

# children() 함수 예제보기

 

이번 예제는 모든 자식요소를 jQuery 셀렉터로 선택하는 방법을 알아보려합니다. 여기서는 div 태그의 자식 요소를 먼저 선택해보겠습니다. 그리고 이를 변수 childrens에 저장해보겠습니다.

 

children.html

<div>
  <p class="test1">
  <p class="test2">
</div>

@ children.js

 

var childrens = $('div').children();

 

실행하면 위 태그에서 div 태그의 모든 자식요소가 변수에 저장되었을 것입니다. 즉 변수 childrens는 div 태그 요소의 모든 자식요소들이 저장되었습니다.

(참고로 일반적으로 제이쿼리 엘리먼트 요소를 변수로 저장할때는 $를 앞 또는 뒤에 추가하여 나타냅니다. 즉 childrens 보다는 $childrens 또는 childrens$로 사용합니다.)

 

 

# 자식 요소에서 원하는 요소만 선택하는 방법

그럼 또 다른 예제입니다. 앞에도 알아봤지만 옵션을 선택하면 자식요소의 필터링... 즉 좀 더 정확한 자식요소만 가져올 수 있습니다.(자식요소들 중에서 원하는 요소만 선택할 수도 있음.)

바로 괄호 안의 매개변수로 선택사항을 추가입력하면 됩니다. 아래 예제를 봐주세요.

 

! 자식 요소 중에서 span 태그 요소만 가져오기

이번에는 자식 요소에서 span 태그 요소만 가져오는 방법입니다.

@ children.html

<div>
  <span>1</span>
  <span>2</span>
  <p>3</p>
</div>

태그의 이름이 span인 것만 가져오기 위해 아래처럼 스크립트를 작성 후 실행합니다.

 

@ children.js

$('div').children('span');

이제 div 자식요소중에서 span 태그 요소만를 선택되었습니다.

 

 

출처 : https://webisfree.com/2015-03-17/[%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC]-%EC%9E%90%EC%8B%9D-%EC%9A%94%EC%86%8C-%EC%84%A0%ED%83%9D%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%B0%BE%EA%B8%B0-children()