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。我的后端开发人员不希望我使用id（不要问我为什么......）并且反复使用上面的标记来显示数据。因此，我需要能够访问点击链接的“第一行”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();
});

甚至更好的imo，因为它将独立于，其中链接在一行中，如果每个“row div”具有相同的类（我假设只有第一个具有类{{1你可以这样做：

first-row

参考： .closest，.siblings

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

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

为您提供$(this).parent().parent();，其中包含div类，而且此类没有类.accommodation的后代。

无论如何，使用这种遍历并不是一个好主意。如果结构稍有改动，您的代码就会中断。总是尝试使用不会破坏结构变化的方法。

Answer 2

你没有使用ID元素来找到你想要的DIV：）

使用closest和nextAll

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

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

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

2 个答案: