Как получить следующий не дочерний элемент

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");, он перейдет к div "entry", а затем найдет только первый "hidden_post".Я думаю, мне все еще нужно другое решение, чтобы перейти прямо от <a class="a-toggle"> к <div class="hidden_post">, который находится рядом с ним.Есть ли решение?

Answer 1

Вы можете использовать parent():

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

Answer 2

Вы можете использовать метод children, чтобы получить всех прямых потомков родительского элемента.

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

Это вернет всех дочерних элементов div с классом entry, у которых есть класс hidden_post.

Answer 3

Самый быстрый способ в этом случае будет сделать родитель -> следующий

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