순수 자바스크립트를 사용해 인접한 형제 요소를 찾는 방법은 간단하지 않습니다. 하지만 제이쿼리 라이브러리의 + 결합자를 사용하면 매우 쉽게 형제 요소를 찾아 반환해 줍니다. 사용방법은 아래와 같습니다.

$('기준요소 + 인접한 형제요소')

예를들어 아래와 같은 코드에서 인접한 h2 코드의 형제요소 p코드를 찾는다고 할 경우 다음과 같습니다. 찾은 코드는 폰트색상을 빨간색으로 변경하겠습니다.



<body>
<h2>H2 element text</h2>
<p>P element text</p>
<h3>H3 element text</h3>
<p>P element text</p>
</body>



<script type="text/javascript">
$('h2 + p').css('color','red');
</script>



H2 element text


P element text


H3 element text


P element text




위에서 보는 것처럼 $('h2 + p') 는 가장 인접한 p코드를 찾아 반환합니다. 이때는 인접한 형제는 찾아 모두 반환하며 만약 하나가 아닌 다수의 형제 요소를 찾으려면 다음과 같은 방법을 사용할 수도 있습니다.

<script type="text/javascript">
$('h2').siblings('p');
</script>


보시는 것처럼 siblings() 메소드를 사용하여 모든 형제요소를 찾았습니다. 결과는 아래와 같습니다.


H2 element text


P element text


H3 element text


P element text




다른 방법으로는 next() 또는 prev() 메소드를 사용해 해당 요소의 이전 또는 다음 형제 요소를 선택하는 것 역시 생각할 수 있습니다. 이 방법은 단 하나의 요소만을 반환하기 때문에 만약 전체 요소를 원한다면 nextAll() 또는 prevAll()을 사용하세요.