[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

[robynosse]

Ho trovato la soluzione al mio problema:
$(this).parents(".calendario").attr('id')

Con questo trovo id specifico di ogni calendario su cui clicco e poi faccio quello che voglio!!!
Praticamente è un find al contrario.

[KillerWorm]

Ciao. Ok per il metodo parents(), ma a quel punto a che ti serve trovare il valore dell'id se devi semplicemente usarlo come altro selettore quando già quel metodo ti restituisce lo stesso elemento? Perché fare il giro dell'oca?

Elegante per elegante, se struttura e ordine degli elementi restano inalterati, dal momento che gli elementi .mostra e .dettaglio sono fratelli, io userei un semplice selettore + (fratello prossimo):

function mostraCalendario(event){
  $("+.dettagli",this).toggle("fast");
}

Nota anche che event.target in questo caso puoi sostituirlo col this.

[robynosse]

Ciao,

ho bisogno dell'id perché devo effettuare operazioni sugli altri calendari che non necessariamente si trovano allo stesso livello di quello su cui clicco, inoltre quando chiudo, nascondo il calendario, tolgo i listener sugli elementi, ed elimino dalla pagina i dettagli del calendario, quindi gli elementi non restano inalterati(il codice adesso è molto più complesso di quello iniziale, inoltre parte del codice JS viene generato dinamicamente lato server per impostare tutto il testo visibile a seconda della lingua del client).

Perché li elimino e non li nascondo semplicemente?
per il semplice fatto che se imposto una data su un calendario precedente, superiore a quella del successivo, autometicamente, tutte le date dei calendari successivi, se hanno una data inferiore, si devono impostare a quella del precedente(lo faccio in cascata), quindi, quando aprirò nuovamente il calendario, il mese potrebbe essere diverso da quello impostato in precedenza.

La regola è inoltre che ci può essere un solo calendario aperto alla volta, se ne apri un altro, si chiude automaticamente quello in cui ti trovi.

Per quanto riguarda l'event.target l'ho sostituito già con il this

[KillerWorm]

Capito.
Buon proseguimento, allora.