Question

给出以下HTML结构：

<div id="wrapper">
    <div id="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div id="middle">
        some text
    </div>
    <div id="bottom">
        some text
    </div>
<div>

当用户点击顶部div（div＃top）中的链接时，如何使用JQuery选择底部div（div＃bottom）？页面上会有几个这样的div，所以我不能只使用$('#bottom')。 $(this).next('#comment-form')也没有用。

Answer 1

如果页面上有几个“底部”，请不要给它们每个ID“底部” - ID应该是唯一的。相反，给他们上课：

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        some text
    </div>
<div>

然后jQuery看起来像：

$('div.top > a').click(function() {
    $(this).parent().siblings('div.bottom').html('Do something');
    return false;
});

Answer 2

您说您正在复制id属性。不要这样做，而是使用类：

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        some text
    </div>
<div>

您的id属性在每个页面中必须是唯一的，否则您的HTML格式无效，而且内容效果不佳。

修复HTML后，事情会变得更加轻松：

$('.link').click(function() {
    var $bottom = $(this).closest('.wrapper').find('.bottom');
    // And now do whatever you need to do with your $bottom.
});

closest函数在DOM树中上升，直到找到所提供的选择器的匹配项，然后find返回以获取.bottom元素。

Answer 3

将所有div更改为id至class。然后，在您的单击处理程序中找到父项并从中进行选择。您可以执行以下任一操作：

$(this).closest(".top").siblings(".bottom");
$(this).closest(".wrapper").find(".bottom");

简单的JQuery选择器

3 个答案: