目標jQuery以上（這個）的多個類？

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

確定，根據您更新的問題。 .currentMenu和.currentPage是同級。 因此，您可以導航到父元素，然后向下鑽取到currentPage。 這是一個小提琴： http : //jsfiddle.net/DuPuJ/

Answer 2

您有兩個選擇。 首先是遍歷DOM，以從.currentMenu li找到最近的.currentPage元素。 給定您的HTML結構，這應該可以工作：

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

第二種選擇是將這段代碼放入您應用於元素的插件中，因此您始終知道在其中選擇元素的上下文。