jquery - 在 jQuery 中仅选择下一个 div

Question

我有一个带有列表的 Rails 应用程序，每个列表项在 div 中都有有关该项目的详细信息，如下所示:

<ul>
 <% @procedures.each do |procedure| %>
 <li class="proc-names">
  <%= link_to procedure.apc %>
 </li>

 <div class="proc-stats">
  <% @all_procedures = Procedure.where("apc = ?", procedure.apc) %>

  <% avg_charges = 0 %>
  <% avg_payments = 0 %>

<% @all_procedures.each do |pr| %>
    <% avg_charges += pr.avg_submitted_charges.to_i %>
    <% avg_payments += pr.avg_total_payments.to_i %>
<% end %>

National average submitted charges: $<%= number_with_delimiter(avg_charges, delimiter: ',') %><br>
National average total payments: $<%= number_with_delimiter(avg_payments, delimiter: ',') %><br>
  </div>
  <% end %>
</ul>

我试图做到这一点，以便当单击链接时，它只显示该项目的详细信息(.proc-stats)。这是我迄今为止拥有的 jQuery 代码，但现在当单击一个链接时，它会显示每个列表项的详细信息。有建议吗？

$(document).ready ->
  $('.proc-names').click (event) ->
    event.preventDefault()
    $('.proc-stats').slideToggle()

Answer 1

您当前正在选择全部 .proc-stats。

相反，您需要找到相对于被单击的 .proc-names 的下一个 .proc-stats。有几种方法可以做到这一点:

1. 将您的搜索限制在共享 parent 内当前点击的proc-names:

   $(document).ready ->
     $('.proc-names').click (event) ->
       event.preventDefault()
       $(this).parent().find('.proc-stats').slideToggle()
   

2. 查找当前点击的.proc-names的sibling .proc-stats:

   $(document).ready ->
     $('.proc-names').click (event) ->
       event.preventDefault()
       $(this).next('.proc-stats').slideToggle()
   

3. 修复您的标记，使您的 .proc-stats 包含在 .proc-name 中，这样您的标记就有效，然后查找.proc-stats内点击.proc-name:

   $(document).ready ->
     $('.proc-names').click (event) ->
       event.preventDefault()
       $(this).find('.proc-stats').slideToggle()