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 中的“酒店信息”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();

参考： 。最接近，.siblings

---

解释为什么你的代码不起作用：

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

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

无论如何，在超过一层的情况下使用这种遍历并不是一个好主意。如果结构稍微改变一下，你的代码就会崩溃。始终尝试使用不会因结构变化而中断的方法。

Answer 2

你没有使用 ID 元素来查找你想要的 DIV 是对的:)

使用 closest 和 nextAll

现场演示：http://jsfiddle.net/jomanlk/xTWzn/

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