.prev() / .next() / .siblings()

by Kim Ara

HTML

<div class="cu_m_sec_b_guide">
  <h2>GUIDE</h2>
  <ul>
    <li class="menu01">자주 묻는 질문</li>
    <li class="menu02">대량 구매 문의</li>
    <li class="menu03">비회원 주문조회</li>
    <li class="menu04">1:1 문의</li>
    <li class="menu05">A/S 센터 찾기</li>
    <li class="menu06">제품 메뉴얼</li>
  </ul>
</div>

CSS

.cu_m_sec_b_guide ul li {float:left; width:100px; height:77px; text-align:center;list-style-type:none; background:url(http://www.cuchen.com/images/main/cu_m_sec_guide1.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(1) {}
.cu_m_sec_b_guide ul li:nth-child(2) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide2.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(3) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide3.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(4) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide4.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(5) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide5.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(6) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide6.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li {display:block; width:100px; height:28px; padding-top:49px; font-size:12px; color:#000;text-decoration:none}

JavaScript

$(document).ready(function(){

	$('.menu03').prev().css('color','red'); 
  $('.menu03').prevAll().css('background-color','yellow'); 
  
  $('.menu03').next().css('color','blue');
  $('.menu03').nextAll().css('background-color','pink');
  
  $('.menu05').siblings().css('border','1px solid red');  
  
});