Question

我很难过。基本上有一个微博帖子列表。在每个帖子之后直接有一个编辑表单，但最初设置为在css中显示none。我只想显示（slideToggle）编辑表单，该表单直接位于点击编辑链接（$ this）的微博客之后。

注意：在下面的描述中我只提到。我的意思是页面上有很多编辑表单，但我只想在文章后面显示一个。其中点击了a.edit_this。

<div id="microblog">
    <article class="post">
      <figure class="av">
    <img src="avatarurl" alt="">
      </figure>
      <div class="post_text">
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span>   <span>Delete</span></h3>
    <div class="postmeta">Date<span>Time</span></div>
           <p>Post body</p>
    <br>
    <a href="#" class="details">Details</a>
      </div>
    </article>  <-- End of micropost

    <form class="edit_form">  <-- Need to show only this when clicking on the .edit_this 
                                  link in the above micropost
    </form>

    <article class="post"> <-- Beginning of next micropost
      <figure class="av">
    <img src="avatarurl" alt="">
      </figure>
      <div class="post_text">
    <h3>Post title <span> <a href="#" class="edit_this">Edit link</a></span>   <span>Delete</span></h3>
    <div class="postmeta">Date<span>Time</span></div>
           <p>Post body</p>
    <br>
    <a href="#" class="details">Details</a>
      </div>
    **</article>**  <-- End of micropost

Answer 1

$('.edit_this').on('click',function(){    
    $(this).closest('.post').next('.edit_form').slideToggle();
});

如果每个表单编辑多篇文章

，则必须使用nextAll（）

Answer 2

我不太清楚微博在哪里，但是：

如果它实际上是在之后的（不在微博中），那么如果表格是非常的下一个元素：

$this.next().slideToggle();

如果它跟随微博，但中间有一些元素：

$this.nextAll("selector for edit form").first().slideToggle();

如果在微博中，那么：

$this.find("selector for edit form").slideToggle();

jQuery只在DOM中单击时查找下一个表单元素

2 个答案: