0

我正在修改 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();
    });
});

但是没有结果：-/这可能吗？

任何帮助是极大的赞赏！

提前非常感谢！

4

2 回答 2

2

尝试这个：

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

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

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

参考： .closest ,.siblings

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

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

给你divwith class .accommodation，这个没有 class 的后代.hotel-info。

无论如何，将这种遍历用于多个级别并不是一个好主意。如果结构稍有改变，您的代码就会中断。始终尝试使用不会因结构更改而中断的方法。

于 2011-04-28T09:44:32.143 回答
0

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

使用closest和nextAll

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

$('.show-info').click(function(){
    $(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});
于 2011-04-28T09:48:35.893 回答