如何获得下一个非子元素

Question

我老实说在发布之前尝试进行搜索，但找不到具体的内容。 所以我的任务是在用户点击链接时在博客中显示隐藏的内容。 HTML看起来像这样：

<div class="entry">
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is all the hidden content</p></div>
</div>

现在jQuery我正在做以下但它不起作用：

$(".hidden_post").hide();
$(".a-toggle).click(function() {
$(this).next(".hidden_post").slideDown("slow"); });

---

因此，要获得下一个元素，我需要首先转到父元素，然后从那里继续搜索。 现在它对我来说变得更加复杂，因为我实际上会隐藏几个 一个“条目”中的内容。像这样：

<div class="entry">  
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #1</p></div>
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #2</p></div>
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #3</p></div>
</div>

现在，如果我使用$(this).parent().next(".hidden_post").slideDown("slow"); 它将进入“entry”div，然后只会找到第一个“hidden_​​post”。我猜 我仍然需要另一个解决方案，直接从<a class="a-toggle">到<div class="hidden_post">旁边的{{1}}。有没有解决方案？

Answer 1

您可以使用parent()：

$(".hidden_post").hide();
$(".a-toggle").click(function() {
   $(this).parent().next(".hidden_post").slideDown("slow");
});

Answer 2

在这种情况下，最快捷的方式是做父母 - ＆gt;下

$(".a-toggle").click(function(){
 $(this).parent().next(".hidden_post").slideDown("slow");
});

Answer 3

您可以使用children方法获取父元素的所有直接子元素。

$('div.entry').children('div.hidden_post');

这将返回div的所有div子节点，其类别为hidden_​​post。