jQuery에서 위의 대상 클래스를 대상으로 (this)?

Question

그래서 같은 일부 HTML 선택 메뉴를 대체하는 간단한 드롭 다운 메뉴를 구축했습니다 : 나는 두 개 이상의 메뉴를 가지고, 마지막 부분 인 경우

$('html, .currentPage').click(function() { 
    $('.currentMenu').slideUp('fast'); 
}); 

$('.currentPage').click(function(e){   
    if(!$(this).next().is(":visible")) { 
     $(this).next().stop().slideDown('fast'); 
    } 
    e.stopPropagation(); 
}); 

$(".currentMenu li").click(function(e){ 
    e.preventDefault(); 
    $(".currentPage").html($(this).text()); 
}); 

그러나 :

$(".currentMenu li").click(function(e){ 
    e.preventDefault(); 
    $(".currentPage").html($(this).text()); 
}); 

것 두 메뉴 모두에서 발생합니다. 특정 메뉴에 대해서만 ".currentPage"클래스를 어떻게 타겟팅 할 수 있습니까?

HTML :

     <div class="menuWrap font"> 
          <div class="currentPage">Trebuchet MS</div> 
          <div class="currentMenu"> 
           <ul> 
           <li>Arial</li> 
           <li>Helvetica</li> 
           <li>Droid Sans</li> 
           <li>Trebuchet MS</li> 
           <li>Georgia</li> 
           <li>Droid Serif</li> 
           </ul> 
          </div> 
         </div> 


         <div class="menuWrap fontSize"> 
          <div class="currentPage">12pt</div> 
          <div class="currentMenu"> 
           <ul> 
           <li>9pt</li> 
           <li>10pt</li> 
           <li>11pt</li> 
           <li>12pt</li> 
           <li>13pt</li> 
           </ul> 
          </div> 
         </div> 

Answer 1

두 가지 옵션이 있습니다. 첫 번째는 에서 가장 가까운 .currentPage 요소를 찾기 위해 DOM을 통과하는 것입니다.

$(".currentMenu li").click(function(e){ 
    e.preventDefault(); 
    $(this).closest(".currentMenu").prev().html($(this).text()); 
}); 

두 번째 옵션을 사용하면 요소에 적용되는 플러그인이 코드를 넣어, 그래서 당신은 항상에서 요소를 선택하는 컨텍스트를 알고

Answer 2

확인, 업데이트 된 질문에 따라. .currentMenu와 .currentPage는 형제입니다. 따라서 부모 요소로 이동 한 다음 현재 페이지로 드릴 다운 할 수 있습니다. 여기에 바이올린이 있습니다. http://jsfiddle.net/DuPuJ/