jQuery - 不确定使用哪个方法，closest() 和 parent() 无效。

Question

天啊，我感觉自己在 Stack Overflow 上发了很多帖子，今天已经是我的第三篇了。抱歉，呵呵。

之前我甚至发过一个关于这个问题的帖子，但是我已经修改了代码，所以我认为发一个新的问题更好。

$('.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，如之前所述。

谢谢。

- qwerty

Answer 1

您可以直接使用以下代码：

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

根据tvanfosson的评论更新：

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

这是一种更加灵活和安全的解决方案。首先获取条目容器（.item），然后查找条目正文并切换它。它对DOM中的特性更不敏感。

- Crozin

---

请注意，这对相对DOM位置敏感。这并不一定是坏事，但如果更改DOM以使父级不处于此确切的兄弟关系中，则需要更新它。对于一种较不敏感的方法，请考虑上升到“最低”公共容器，然后使用基于类选择器的查找，如我的答案所示。这对DOM中的小变化不太敏感，即仅取决于“按钮”和显示的元素位于同一容器中。 - tvanfosson

@tvanfosson：你说得完全正确。我已根据你的评论更改了我的答案。 - Crozin

我注意到你先用了“parent”，然后又改成了“parents”。两个都正确吗？我现在特别是在讨论拼写... - qwerty

.parent([selector])将返回元素的父级（如果传入了selector，则还会检查父级是否匹配）。而.parents([selector])将返回所有祖先元素。换句话说：parent()只查找“一级上”的父级元素。 - Crozin

@Nike - .parent() 找到直接的父元素，如果它匹配选择器（如果您传递了一个，比如.parent(selector)）。.parents(selector) 找到所有匹配的父元素，在这种情况下不应使用它，最好使用.closest(selector)，因为它只会获取与选择器匹配的第一个/最近的父元素。如果更上面有一个class="item"元素，那么这将突然产生非常不同的效果，切换所有子元素，除了在这种情况下的兄弟元素之外，它实际上会切换所有.meddel。 - Nick Craver

好的，听起来很合理。谢谢！ - qwerty

Answer 2

这里有另一种方法来解决这个问题：

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

这段内容涉及到IT技术，意思是查找一个兄弟元素.meddel来进行切换，前提是先到达<h4>。你可以在这里阅读更多关于.siblings()的信息。这种方法使代码更具有弹性，可以应对标记的变化，但如果脚本已经紧密耦合，那可能不太重要。

- Nick Craver

---

你们为什么回答得这么快？我喜欢！而且我爱你们（不是同性恋那种），谢谢，它起作用了 :) - qwerty

Answer 3

一直向上到列表元素，然后找到具有匹配类的包含元素。这样做更加健壮，可以应对大多数小的DOM更改，即它不依赖于相对位置。

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

- tvanfosson