Question

I have this HTML:

  <tr>
    <td><a class="payPlan">...</a></td>
  </tr>
  <tr id="payPlanInfoRow">
    <td colspan="7" class="payPlanInfo">
           <div>...</div>
        </td>
   </tr>

When I click .payPlan I need to traverse to the DIV inside .payPlanInfo.

This issue is that this html structure will be repeated multiple times so I think I need to use .find() or .closest() somehow. Any help would be appreciated greatly.

I’m quite new to jQuery

Answer 1

The “closest” selector returns the first ancestor element matching its selector.

$(".payPlan").click(function(){

   var $relatedDiv = $(this).closest('tr').next().find(".payPlanInfo div:first");
   $relatedDiv.addClass('highlight'); //or whatever.

});