jQuery: Получите ссылку на определенный элемент без использования идентификатора

Question

Я немного разжигаю с jQuery, чтобы показать скрытый Div, когда ссылка нажимается. Это должно быть довольно просто, но в этом случае есть недостаток. У меня следующая разметка:

<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», я хочу, чтобы Div "Hotel-Info" показал. Мои бэкэнд -разработчики не хотят, чтобы я использовал идентификаторы (не спрашивайте меня, почему ...), а вышеупомянутая разметка используется снова и снова для отображения данных. Поэтому мне нужно иметь возможность получить доступ к Div "Hotel-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();
});

Еще лучше ИМО, так как это было бы независимо от куда Ссылка находится в ряду, если у каждого «строки div» есть один и тот же класс (я предполагаю, что только первый имеет класс first-row), ты можешь сделать:

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

Ссылка: .closest, .siblings

---

Объяснение, почему ваш код не работает:

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

дает вам div с классом .accommodation И у этого нет потомка с классом .hotel-info.

В любом случае, это не очень хорошая идея, чтобы использовать этот вид обхода для более чем одного уровня. Если структура немного изменена, ваш код сломается. Всегда старайтесь использовать методы, которые не нарушают изменения структуры.

Answer 2

Вы правы в том, что не используете элемент идентификатора, чтобы найти желаемый див. :)

Использовать closest а также nextAll

Живая демонстрация здесь: http://jsfiddle.net/jomanlk/xtwzn/

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