본문 바로가기

개발/jQuery

jQuery (제이쿼리) - jQuery 동일 노드 엘리먼트 선택하기 (셀렉터 +, ~)

이번에는 제이쿼리에서 동일 노드에 위치한 엘리먼트를 선택하는 방법에 대해서 알아보자.

첫번째 노드입니다.

중간계 노드입니다. 두번째 노드입니다.

세번째 노드입니다.

네번째 노드입니다.

다섯번째 노드데스요.

여섯번째다.

칠번째다.

$(document).ready(function() { alert($("div + p").length); alert($("div ~ p").length); });

위의 소스를 실행시켜보면 첫 번째 alert 은 2 의 값이 리턴되고 두 번째 alert 는 3 의 값이 표시된다.


위의 소스를 보면 3개의 세 개의 1레벨 div 노드가 있고 그 안에 태그들이 있는 형식인데...

+ 의 경우는 앞서 공부했던 > 와 마찬가지로 해당하는 태그와 인접해있어야만 선택이 된다.


단, 첫번째 위치하는 셀렉터의 다음에 위치하는(맞닿아있는) 노드만이 선택 가능하다.

중간계 노드입니다. 두번째 노드입니다.

세번째 노드입니다.

네번째 노드입니다.

다섯번째 노드데스요.

즉, 두 번째 큰 div 안에는 위와 같은 소스가 있지만 div 태그와 맞닿아 있으면서 div 태그와 동일 레벨(노드)에 위치한

네번째 노드만이 해당되는 것이다. 다섯번째 노드도 동일 레벨(노드)에 있지만 div 태그와 맞닿아 있지 않으므로 선택에서 제외된다.


따라서 두 번째 div 의 네번째 노드와 세번째 div 의 칠번째 노드가 선택되어져 결과값으로 2 를 리턴해주는 것이고,

중간계 노드가 선택되지 않은 이유는 위에도 작성했듯이 동일한 레벨(노드)이 아닌 자식값(child 노드)으로 존재하기 때문이다. 


반대로 ~ 의 경우에는 앞의 조건에 맞는 모든 노드를 선택해서 리턴해준다.

따라서 두 번째 div 의 네번째, 다섯번째 노드와 세 번째 div 의 칠번째 노드가 선택되어졌기 때문에 3 을 리턴해준다.

이번에도 마찬가지로 중간계 노드는 동일 레벨(노드)에 존재하지 않으므로 선택되지 않는다.


단, 다음과 같은 소스의 경우 ~ 를 사용하더라도 칠번째 노드는 선택되지 않는다.

첫번째 노드입니다.

중간계 노드입니다. 두번째 노드입니다.

세번째 노드입니다.

네번째 노드입니다.

다섯번째 노드데스요.

칠번째다.