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

Posted 2023-05-09

【中文标题】jQuery 仅在 DOM 中单击时查找下一个表单元素

【英文标题】：jQuery find only the next form element on click in the DOM

【发布时间】：2013-08-05 07:21:18

【问题描述】：

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

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

<div id="microblog">
    <article class="post">
      <figure class="av">
    <img src="avatarurl" >
      </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" >
      </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

【参考方案1】：

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

如果每个表单编辑不止一篇文章，您可能必须使用 nextAll()

【讨论】：

感谢您的回答，但它似乎不起作用。如果我向它添加 preventDefault() ，那么它会阻止默认行为，但 slideToggle 不起作用。

.edit_form 是否总是紧跟在相应文章的后面？

".edit_form 总是紧跟在相应文章之后吗？" - 是的。奇怪的。似乎对我不起作用。会仔细检查。

【参考方案2】：

我不太确定上面的微博在哪里，但是：

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

$this.next().slideToggle();

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

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

如果它在微博内，那么：

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