[jQuery] 부모형제요소 찾기 | parent closest children find prev next filter

기초리스트

▶기초 ( 선언하기 $.ready() )
▶ 속성보기 ( attr val checked disabled )
▶ 추가 및 삭제 ( append remove before after text html )
▶ 부모형제요소 찾기 ( parent closest children find prev next filter )
▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass )

---

공부하면서 정리한 내용입니다
참고한 내용은 링크를 확인해주세요

---

<!--HTML-->

<div>  
    <a>  <span></span>  </a>  
    <input type=radio name='number' value=1 />
    <input type=radio name='number' value=2 />
</div>

부모요소 찾기

// (셀렉터에 부합하는) 바로 위의 부모 
$('span').parent(selector);  // a, input, input

// (셀렉터에 부합하는) 위의 부모들
$('span').parents(selector); // a, input, input, div

// 가장 가까이에 있는 원하는 부모요소
$('span').closest('div');  // div

자식요소 찾기

// (셀렉터에 부합하는) 바로 아래의 자식들
$('div').children(selector); // a, input, input

// 가장 가까이에 있는 원하는 자식요소
$('div').find("input:radio[value=1]");  // input

형제요소 찾기

// 바로 이전요소
$('a').prev(selector);

// 이전요소 전체
$('a').prevAll(selector);

// 바로 다음요소
$('a').next(selector);

// 다음요소 전체
$('a').nextAll(selector);

// 선택자를 제외한 같은위치의 모든요소
$('a').siblings(selector);

filter (필터링)
find와 다르게 선택자를 포함한 영역 안에서 검색이 가능하다.

$('div').filter('div');   // div

$('div').filter(function(index, selector){  });  

그 외 API

// 맨 처음 일치하는 선택자
$('input').first();   // input value=1

// 맨 마지막에 일치하는 선택자
$('input').last();    // input value=2

// 짝수번째 (first 0)
$('input').even();    

// 홀수번째 (first 0)
$('input').odd();    

// 셀렉터 인덱스의 요소 (first 0). -1은 뒤부터 검색
$('input').eq(1); 

---