javascript - jQuery : To find the closest tr class

Question

下面是我的结构

-点击flight_itinerary类应该打开flight_summary类html。

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td><a class="flight_itinerary">Flight Itinerary</a> </td> 
                </tr>   
            </table> 
        </td>
    </tr>
    <tr class="flight_summary" style="display:none;">
        <td>
            <table>
                <tr>
                    <td></td> 
                </tr>   
            </table> 
        </td>           
    </tr>
</table>

• 这是我尝试打开 tr 标签的脚本

<小时/>

    $(document).on('click', '.flight_itinerary', function(){
            $(this).closest("tr").find('.flight_summary').toggle();
});

Answer 1

.find() 查找与选择器匹配的后代。当您从 .flight_itinerary 转到最近的 tr 时，.flight_summary 如果其后代则不是一个。

要从 .flight_itinerary 前往 .flight_summary，您必须前往2nd tr，然后转到之后的下一个tr。您不需要在那里使用 .find，因为 tr 是 .flight_summary。

$(document).on('click', '.flight_itinerary', function() {
  $(this).parents("tr").eq(1).next().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>
    <table>
      <tr>
        <td><a class="flight_itinerary">Flight Itinerary</a> 
        </td>
        <tr>
    </table>
    </td></tr>
    <tr class="flight_summary" style="display:none;">
      <td><table>
        <tr>
          <td>Flight Summary</td>
          <tr>
      </table>

      </td></tr>
</table>