Using jQuery to work with next first element that is not a sibling

Question

What I need to do is get the next element which isn't of the same type as the current. I'm not sure if that makes any sense. As far as I know, next() in jQuery only gets the next sibling.

This is what I have:

<tr>
   <td>
      <a>Link</a>
   </td>
</tr>
<tr>
   <td>
      <div class="A">
         <div class="B">...</div>
         <div class="B">...</div>
         <div class="B">...</div>
      </div>
   </td>
</tr>
<tr>
   <td>
      <a>Link</a>
   </td>
</tr>
<tr>
   <td>
      <div class="A">
         <div class="B">...</div>
         <div class="B">...</div>
         <div class="B">...</div>
      </div>
   </td>
</tr>

After clicking the link, I'd like to do something with the div.B's within div.A. But only the first div.A right after the link, not the ones on the rest of the page. To be more specific, what I'm trying to do is set this up so that clicking the link will show or hide the div.B's.

Is this possible or feasible? Will this being in a table be a problem?

I'm not a jQuery expert so I'm just kinda messing around with it right now.

Answer 1

This should do it for you. Will hide the div.B's in the next div.A following the tag.

$('a').click(function(){
    $(this).closest('tr').next().find('.A div.B').hide();
});