jQuery -> problem with combination of selectors - div -> class -> a

I have a problem with selectors in jQuery.

I have the following structure: http://img46.imageshack.us/img46/3639/structureb.png

<div id="myDatepicker" class="hasDatepicker" style="display: inline-block;">
    <div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <table class="ui-datepicker-calendar">
            <tbody>
                <tr>
                    <td class="ui-body-c" onclick="DP_jQuery_1297589131703.datepicker._selectDay('#myDatepicker',1,2011, this);return false;">
                        <a class="ui-state-default ui-btn ui-btn-up-c" href="#" data-theme="c">1</a>
                    </td>
                    ...

In jQuery I do this:

$(".ui-datepicker-calendar a").live("click", function() {
    $("#myDatepicker").hide();
});

This works like I expect it, my d开发者_运维问答atepicker will be hidden if I click on a day of the month. But the problem is, I have two datepickers on one page. So with this jQuery code, both datepickers will "call" this function, because both matches .ui-datepicker-calendar a. So I need a "better" selector.

My datepickers have the names myDatepicker1 and myDatepicker2 (instead of the HTML code above myDatepicker) and I tried this:

$("#myDatepicker1 .ui-datepicker-calendar a").live("click", function() {
    alert("datepicker1");
});

But this does not work, I get no alert message. So how can I check if a user clicks a link a which is under the class .ui-datepicker-calendar (this works), and is under the id #myDatepicker (this does not work with my jQuery code)?

Does anyone know?

Thank you in advance & Best Regards, Tim.

You can use closest to find the nearest matching data picker element:

$(".ui-datepicker-calendar a").live("click", function() {
    $(this).closest(".hasDatepicker").hide();
});

Notice that hasDatepicker class is used which is there for each of your date pricker elements.