How best to traverse table rows, using JQuery?

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 tr开发者_JAVA百科averse 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

You could do something like this..

$(".payPlan").click(function(){
   var relatedDiv = $(this).parents("tr:first").next().find(".payPlanInfo div:first");
   //TODO: Stuff with relatedDiv
});

Where relatedDiv would then be the div in the next table row and you could do whatever you need to with it.

http://jsfiddle.net/Pv76W/

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.

});

$("td.payPlanInfo > div").each(function(i, obj){



});

Edit:

$("td.payPlanInfo").bind('click', function()
{
    $(this).children("div").each(function(i, obj)
    {
        // obj is your div, to what you like with it
    });

});