javascript - jQuery:在不使用 id 的情况下获取对特定元素的引用

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”链接时，我希望显示“hotel-info”div。我的后端开发人员不希望我使用 ids(不要问我为什么..)并且上面的标记被一遍又一遍地使用来显示数据。因此，我需要能够访问单击链接的“第一行”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”都具有相同的类(我假设只有第一个具有类，那么它将独立于链接所在的行位置第一行)，你可以这样做:

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

引用: .closest , .siblings

<小时/>

解释为什么您的代码不起作用:

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

为您提供带有 .accommodation 类的 div，而该 div 没有带有 .hotel-info 类的后代。

无论如何，在多个级别上使用这种遍历都不是一个好主意。如果结构稍微改变一下，你的代码就会崩溃。始终尝试使用不会因结构更改而中断的方法。