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

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

0 голосов
/ 28 апреля 2011

Я немного повозился с 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".Мои бэкэнд-разработчики не хотят, чтобы я использовал идентификаторы (не спрашивайте меня, почему ..), и вышеупомянутая разметка используется снова и снова для отображения данных.Поэтому мне нужно иметь доступ к разделу "hotel-info" в разделе "first-row", где нажата ссылка.

Я пытался сделать что-то вроде: 

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

Но без результата: - / Это вообще возможно?

Любая помощь очень ценится!

Заранее большое спасибо!

Ответы [ 2 ]

2 голосов
/ 28 апреля 2011

Попробуйте это: 

$('.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.

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

0 голосов
/ 28 апреля 2011

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

Используйте closest и nextAll

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

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