jQuery를 사용하여 특정 선택자를 기준으로 자식 요소들을 어떻게 찾을 수 있을까? --> 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용 예시)) 다음과 같은 DOM이 있는 경우
1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때 --> children() 사용
2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때 --> find() 사용(children은 자식 태그까지만 찾을 수 있다)
+ 참고로 eq(0)은 선택한 요소 중 첫번째 요소를 선택합니다. ex) <ul> <li></li> // 첫번째 li --> li:eq(0) <li></li> // 두번째 li --> li:eq(1) <ul> 티스토리 뷰
$('ul').find('span:eq(2)').css('color', 'red'); 색상을 넣어 테스트. 3번째 span을 가져온다. 봉봉의 개인 블로그입사후 공부한내용 2018-01-12(JQuery 자식 요소 선택 방법 및 찾기 Children(), find())봉봉이네 2018. 1. 12. 12:18 .Children() JQuery를 사용하여 간단하게 자식 요소를 선택하는 방법을 알아보려고 합니다. 자식 요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다. #JQuery children() 자식 요소 얻기 위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올수 있다는 점이 차이점이다. 그럼 children()의 간단한 사용방법은 아래와 같습니다. $(element).children(option) 괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링 하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다. !children() 옵션 사용하여 찾기 예제보기 아래는 red라는 클래스 명을 가진 자식 요소만 찾아서 반환합니다. @children.html @children.js
위 코드를 실행하면 red 클래스를 가진 요소만 선택됩니다. 그럼 아래에서 다른 방법의 예제를 알아보세요. # children()함수 예제보기 이번 예제는 모든 자식요소를 jQuery 셀렉터로 선택하는 방법을 알아보려합니다.여기서는 div태그의 자식 요소를 먼저 성택해보겠습니다. 그리고 이를 변수 childrens에 저장해보겠습니다. @children.html
@children.js
실행하면 위 태그에서 div 태그의 모든 자식요소가 변수에 저장되었을 것입니다. 즉 변수 childrens는 div태그 요소의 모든 자식 요소들이 저장되었습니다. (참고로 일반적으로 제이쿼리 엘리먼트 요소를 변수로 저장할때는 $를 앞 또는 뒤에 추가하여 나타냅니다. 즉 childrens 보다는 $childrens 또는 childrens$ 로 사용합니다.) #자식 요소에서 원하는 요소만 선택하는 방법 그럼 또 다른 예제입니다. 앞에도 알아봤지만 옵션을 선택하면 자식 요소의 필터링... 즉 좀더 정확한 자식 요소만 가져올 수 있습니다. 바로 괄호 안의 매개변수로 선택사항을 추가입력하면 됩니다. 아래 예제를 봐주세요. !자식 요소중에서 span 태그 요소만 가져오기 이번에는 자식 요소에서 span 태그 요소만 가져오는 방법입니다. @children.html
태그의 이름이 span인 것만 가져오기 위해 아래처럼 스크립트를 작성 후 실행합니다. @children.js
이제 div 자식 요소중에서 span 태그 요소만을 선택되었습니다. .find() 개요 : 선택된 요소 집합에서 선택자, jquery 객체, 요소와 같은 인자에 맞는 요소들을 걸러내어 줍니다. .find(selector) *selector : 일치하는 요소를 위한 선택자가 표현된 문자열* .find(jQuery object) *jQuery object : 요소를 찾을 jQuery 객체* .find(element) *element : 요소를 찾을 요소 표현* jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .find()함수를 사용하면 DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다. .find() 와 .children() 함수는 비슷합니다. 하지만 .children() 함수는 직계 자식 요소만을 추출할 수 있는 것이 .find()함수와 다른 점입니다. 예제를 보겠습니다.
item II를 기준으로 li 요소들을 모두 찾아내는 스크립트는 아래와 같습니다.
이 스크립트에 영향을 받는 li 요소들은 A,B,1,2,3,C 입니다. 즉, 하위 (자식)요소들을 깊이에 상관없이 모두 찾아내어 준다는 뜻입니다. 위에서도 말씀드렸듯이 .children()과 가장 큰 차이점입니다. 참고로 jquery 객체를 .find() 함수에 인자로 넣을 수 있습니다. 아래와 같은 방법으로 해보십시오.
|