target mutiple classes above (this) in jQuery?

Question

I've built a simple dropdown menu to replace some html select menus like so:

$('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());
});

However, if I were to have more than one menu, the final part:

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

will occur on both menus. How can I target the ".currentPage" class for that specific menu only?

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

OK, based on your updated question. .currentMenu and .currentPage are siblings. So you can navigate to the parent element, then drill down to the currentPage. Here's a fiddle: http://jsfiddle.net/DuPuJ/

Answer 2

You have two options. The first is to traverse the DOM to find the nearest .currentPage element from .currentMenu li . Given your HTML structure, this should work:

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

The second option is to put this code into a plugin which you apply to an element, so you always know the context in which to select elements in.