jQuery - 不确定使用哪种方法，closest() 和parent() 不起作用

Question

天哪，我感觉我在向 stackoverflow 发送垃圾邮件，这是我今天的第 3 篇文章。抱歉，呵呵。

我什至之前发布过一个与此相关的问题，但是我已经更改了代码，所以我认为最好发布一个新问题。

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('.meddel').toggle(250);
});

这就是我现在所拥有的。 Closest() 方法不起作用的原因是因为 div .meddel 就在 h4 元素旁边。而closest()只会沿着DOM树向上爬行，忽略其他子元素。正确的？ parent() 的工作原理几乎相同，但也不起作用。

因为我只想切换元素中最近的 .meddel div，所以我需要一些东西，是的，只是抓取最近的一个，而不是全部。

为了稍微澄清一下，这里是一个列表项的 HTML：

<li class="item">

<h4><a class="toggle">[topic]</a><small>2010-04-17 kl 12:54 by <u>[name]</u></small></h4>

<div class="meddel">
    <span>
        <img style="max-width: 70%; min-height: 70%;" src="profile-images/img.jpg" alt="" />
        <a href="account.php?usr=47">[name]</a>
    </span>

    <p>text</p>
</div>

</li>

我有几个类似的项目，如果我单击一个切换链接，我只想切换最近的 .meddel，如前所述。

谢谢。

Answer 1

您可以只使用：

$(this).parent().next().toggle(250);

更新（根据 tvanfosson 评论）：

$(this).parents(".item").find(".meddel").toggle(250);

这是一个更灵活、更安全的解决方案。首先它获取条目容器 (.item)，然后找到条目的主体并切换它。它对 DOM 中的功能更改不太敏感。

Answer 2

这是解决此问题的另一种方法：

$('.pmlist ul li h4 .toggle').click(function() { 
  $(this).closest('h4').siblings('.meddel').toggle(250); 
});

这会转到

，然后查找要切换的同级 .meddel 元素。 您可以在此处阅读有关 .siblings() 的更多信息。此方法使其对标记更改更具弹性，但如果脚本无论如何都是紧密耦合的，那么这可能不是一个太大的问题。

Answer 3

一直向上到列表元素，然后找到具有匹配类的包含元素。对于大多数较小的 DOM 更改来说，这将更加稳健，即，它不依赖于相对位置。

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('li').find('.meddel').toggle(250);
});