在 jQuery 切换到特定的动态 Rails 元素之后，在它旁边放置一个 div

Question

在我的 Rails 应用程序中（我应该注意，它使用的是 Bootstrap 的网格系统），我在左栏中显示了一篇博文。在右栏中，我使用 jQuery 切换效果来打开一个快速表单（比如用户可以在其中发表评论）。

要激活此表单，我使用我的 jQuery 在单击段落标记时将其切换，现在可以正常工作了。但是，ID 为#exampleToggle 的表单将发布到列的最顶部。

问题：如果我想让 form/exampleToggle 不仅切换到被点击的段落标签，而且在 next 中切换到被点击的段落标签怎么办？

<div class="col-md-8">
    <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <p id="category"><%= post.category %></p>
            <div id="text"><%= markdown(post.content) %></div>    
    <% end %>
</div> 

<div class="col-md-4">
<div class="exampleToggle">
    <%= form_for :cements do |f| %>
        <div class="form-group">
        <div class="field">
        <%= f.label :username %><br>
        <%= f.text_field :username, class: "form-control" %>
            </div>
            </div>

        <div class="form-group">
        <div class="field">
        <%= f.label :post %><br>
        <%= f.text_area :post, class: "form-control" %>
      </div>
      </div>

<div class="actions">
    <%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>

<script>

    $(document).ready(function(){
        $( ".exampleToggle" ).hide();

        $("p").click(function(){
            $(".exampleToggle").toggle();
            });
    });

</script>

当然，如果我的页面是静态的，这将相当容易。假设我有三个段落标签：我可以使用网格系统创建“行”，并在单击正确的 id 选择器时在该行中发布表单。

由于这是动态内容，Rails 循环中可能有任意数量的段落，该解决方案不起作用。

此外，如果有更聪明的方法可以做到这一点，我完全可以不使用 Bootstrap 网格。我现在的推理是，我正在右侧创建一个列空间来放置表单——我只需要找到一些方法来在单击时将exampleToggle 有效地放置在关联的段落标记旁边。

这可能吗？

Answer 1

显然，这在很大程度上取决于您计划如何填充这些弹出框，但以下是如何使用 jQuery 追加的示例，以及如何通过 CSS 根据点击的元素定位。

$(document).ready(function(){
  $("p").click(function(){
    $(this).append("<div class='pop-out'>populate this dynamically</div>");
  });
});

然后：

p {
  position: relative;
}

.pop-out {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
}

如果您可以创建一个示例 JSFiddle，我可以帮助解决那里的任何问题。