jQuery：IDを使用せずに特定の要素への参照を取得します

Question

リンクがクリックされたときに隠されたDIVを表示するために、JQueryを少しいじめています。これはかなり単純なはずですが、この場合は欠陥があります。私は次のマークアップを持っています：

<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>

「show-info」リンクをクリックすると、「Hotel-info」Divが表示されます。私のバックエンド開発者は、私にIDを使用してもらいたくありません（理由を聞かないでください。）、上記のマークアップは何度も何度も使用してデータを表示します。したがって、リンクがクリックされている「最初の列」DIVで「ホテルINFO」DIVにアクセスできる必要があります。

私は次のようなことをしようとしました：

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

しかし、結果なしに： - /これはまったく可能ですか？

どんな助けも大歓迎です！

よろしくお願いします！

Answer 1

これを試して：

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

それは独立しているので、さらに良いIMO どこ すべての「行div」が同じクラスを持っている場合、リンクは連続してあります（最初のクラスのみがクラスのみを想定しています first-row）、 できるよ：

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

参照： .closest, .siblings

---

説明あなたのコードが機能しない理由：

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

あなたに与えます div クラスで .accommodation そして、これにはクラスの子孫はいません .hotel-info.

とにかく、この種のトラバーサルを複数のレベルで使用することは良い考えではありません。構造が少し変更された場合、コードは壊れます。常に構造の変更を破らない方法を使用してみてください。

Answer 2

あなたはあなたが望むdivを見つけるためにID要素を使用しないことに正しい:)

使用する closest と nextAll

ここでライブデモ： http://jsfiddle.net/jomanlk/xtwzn/

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