Javascript&JQuery - .siblings()

형제(sibling) 요소의 선택

DOM 트리에서 특정 요소의 형제(sibling) 요소 즉, 같은 선상에 있는 요소를 선택하기 위한 메소드는 다음과 같다.

메소드설명

.siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
.next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
.nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
.nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
.prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.
.prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다.
.prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.
.siblings() 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.

아래와 같이 HTML 요소가 있을 때,

<ul>ul (부모)
  <li>li (형제)</li>
  <li>li (형제)</li>
  <li class="me">li (나)</li>
  <li>li (형제)</li>
  <li>li (형제)</li>
</ul>

me 클래스를 가진 요소의 같은 선상에 요소를 모두 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").siblings().css({"border": "2px solid red"});

내소스

j$(".evt_list li").click(function(){
		j$(this).siblings().find("span").removeClass();
		j$(this).find("span").addClass("on");
		
		/*
		* 스텝별 상품 선택 값을 변수에 입력
		*/
		var step = j$(".evt_list").index(j$(this).closest("ul"))+1;
		var stepGoods = j$(this).index()+1;
		
		eval("step"+step+"Goods= "+stepGoods+"");
		
		return false;
	});

참고 : www.devkuma.com/books/pages/221