[JQUERY] click su elemento, conoscere id del 'parent'

[robynosse]

Ciao a tutti,

dato questo html generato dinamicamente in javascript:

<div class="calendario" id="dataInizio">
<div class="panel panel-default">
<div class="input-group mostra">    
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>    
<input name="dataInizio" type="text" class="form-control" placeholder="inserisci la data" disabled="">
</div>
<!-- Default panel contents -->
<div class="dettagli" style="display: block;">
<div class="panel-heading">    <div style="text-align: center;">        
<span class="glyphicon glyphicon-chevron-left indietro">
</span>        
<strong>Luglio 2015</strong>         
<span class="glyphicon glyphicon-chevron-right avanti">
</span>    </div></div><!-- Table --><table class="table">    <thead>        <tr><th>Lu</th><th>Ma</th><th>Me</th><th>Gi</th><th>Ve</th><th>Sa</th><th>Do</th>        </tr>     </thead>    <tbody><tr><td></td><td></td><td class="giornoCalendarioNo">01</td><td class="giornoCalendarioNo">02</td><td class="giornoCalendarioNo">03</td><td class="giornoCalendarioNo">04</td><td class="giornoCalendarioNo">05</td></tr><tr><td class="giornoCalendarioNo">06</td><td class="giornoCalendarioNo">07</td><td class="giornoCalendarioNo">08</td><td class="giornoCalendarioNo">09</td><td class="giornoCalendarioNo">10</td><td class="giornoCalendarioNo">11</td><td class="giornoCalendario giornoAttuale">12</td></tr><tr><td class="giornoCalendario">13</td><td class="giornoCalendario">14</td><td class="giornoCalendario">15</td><td class="giornoCalendario">16</td><td class="giornoCalendario">17</td><td class="giornoCalendario">18</td><td class="giornoCalendario">19</td></tr><tr><td class="giornoCalendario">20</td><td class="giornoCalendario">21</td><td class="giornoCalendario">22</td><td class="giornoCalendario">23</td><td class="giornoCalendario">24</td><td class="giornoCalendario">25</td><td class="giornoCalendario">26</td></tr><tr><td class="giornoCalendario">27</td><td class="giornoCalendario">28</td><td class="giornoCalendario">29</td><td class="giornoCalendario">30</td><td class="giornoCalendario">31</td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>    </tbody></table></div></div></div>

Le prime 9 righe, prima di <!-- Default panel contents -->

Ho registrato questo evento:

$("#dataInizio").find(".mostra").on("click",mostraCalendario);

Sto cercando di fare una cosa un po' più elegante del seguente codice:

        function mostraCalendario(event){
            id=$(event.target).parent().parent().parent().parent();
            if(!id.attr("id")){id=$(event.target).parent().parent().parent();}
            idElemento="#"+id.attr("id");
            $(idElemento).find(".dettagli").toggle("fast");
        }

Ho bisogno di conoscere l'id dell'elemento parent:

<div class="calendario" id="dataInizio">

quando clicco su un elemento 'discendente' di:

<div class="input-group mostra">

In modo da mostrare e nascondere il calendario su cui si è fatto click, dal momento che ho almeno 2 calendari nella pagina.

Il codice funziona, ma esiste una forma più elegante per farlo senza usare tutti quei 'parent()'?

Grazie,
Roberto