jQuery: ottenere un riferimento ad un elemento specifico senza utilizzare id

Question

sto armeggiare un po 'con jQuery per mostrare un div nascosto quando un link viene cliccato. Questo dovrebbe essere abbastanza semplice, ma c'è un difetto ad esso in questo caso. Ho il seguente markup:

<div class="first-row">
        <div class="week">
            <p>Uge 2</p>
            <p>(08-01-11)</p>
        </div>
        <div class="destination">
            <p><a href="#">Les Menuires</a></p>
            <p>(Frankrig)</p>
        </div>
        <div class="days">4</div>
        <div class="transport">Bil</div>
        <div class="lift-card">3 dage</div>
        <div class="accommodation">
            <p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
            <p>4-pers. værelse m. bad/toilet</p>
        </div>
        <div class="order">
            <p><a href="#">2149,-</a></p>
            <p class="old-price">2249,-</p>
        </div>
        <div class="hotel-info">
         <!-- The div I want to display on click -->
        </div>
    </div>

Quando clicco il link "Mostra-info" Voglio che il div "hotel-info" al display. I miei sviluppatori backend non vogliono che io a utilizzare gli ID (non chiedetemi perchè ..) e la sopra markup è usato più e più volte per visualizzare i dati. Perciò ho bisogno di essere in grado di accedere al div "hotel-info" nel div "prima fila", in cui si fa clic sul collegamento.

ho cercato di fare qualcosa di simile:

$(document).ready(function() {
    $('.show-info').click(function() {
        var parentElement = $(this).parent().parent();
        var lastElementOfParent = parentElement.find(".show-hotel");
        lastElementOfParent.show();
    });
});

Ma senza risultato: -? / Questo è possibile a tutti

Ogni aiuto è molto apprezzato!

Grazie mille in anticipo!

Answer 1

Prova questo:

$('.show-info').click(function() {
    $(this).closest('.accommodation').siblings('.hotel-info').show();
});

Ancora meglio IMO, come sarebbe indipendente dalla , dove il link è in una fila, se ogni "riga div" ha la stessa classe (I assumere solo il primo ha classe first-row), si può fare:

$(this).closest('.row-class').find('.hotel-info').show();

Riferimento: .closest , .siblings

---

Spiegazione motivo per cui il codice non funziona:

$(this).parent().parent();

ti dà la div con classe di .accommodation e questo non ha alcun discendente con classe .hotel-info.

Non è una buona idea di utilizzare questo tipo di attraversamento per più di un livello comunque. Se la struttura è cambiato un po ', il codice si romperà. Cercate sempre di utilizzare metodi che non rompere sui cambiamenti della struttura.

Answer 2

Hai ragione a non utilizzare un elemento ID per trovare il DIV si desidera:)

Usa closest e nextAll

demo live qui: http://jsfiddle.net/jomanlk/xTWzn/

$('.show-info').click(function(){
    $(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});