meaning of this jquery code

Question

Hi all, I posted a question http://stackoverflow.com/questions/3560381/next-not-working and gota reply which is working fine, but can somebody explain me what exactly is going on here:

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .closest('tr').siblings('tr').find("img.cc").hide();

Answer 1

Toggles visiblity of img.cc in the next table row and hides all other img.cc in the table.

Answer 2

This code is probably taken from in middle the context of a function

the first line says something like:

Starting from this (the element/s called on), Find the nearest (parent) tr then look for the next tr(meaning a brother of this parent) and find an img with the class of "cc" andtoggle its display value (meaning, if its visible then hide it and if its hidden show it.

The second line starts from where it finished, and says find a img with a class of "cc" in the siblings of the nearest (parent) tr's next tr and hide that it.

Answer 3

It does the following, each step related to the method called:

1. .closest('tr') - go from the current element up to the nearest <tr> ancestor (or itself, if it's already a <tr>).
2. .next('tr') - go to the next sibling row
3. .find("img.cc") - finds a <img class="cc"> inside that row
4. .toggle() - toggle it (show if hidden, hide if shown)
5. .closest('tr') - go back up to the <tr>
6. .siblings('tr') - select all sibling (other) rows
7. .find("img.cc") - find all the <img class="cc"> in them.
8. .hide() - hide them

It could be a bite more efficient though using .end() to hop back in the chain, like this:

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .end().siblings('tr').find("img.cc").hide();

Answer 4

<tr>                              <<-- 1.)    <<-- 6.)
  <td>
    <a href="#" class="xx"></a>               <<-- we start here
  </td>
  <td>
    data
  </td>
</tr>
<tr>                              <<-- 2.)    <<--  5.)
  <td> 
    <img src="#" class="cc" />    <<-- 3.)    <<-- 4.)
  </td>
</tr>    
<tr>                              <<-- 6.)
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data2
  </td>
</tr>
<tr>                              <<-- 6.)
  <td> 
    <img src="#" class="cc" />    <<-- 7.)
  </td>
</tr>

• 1.) $(this).closest('tr')

  This line jumps to 1.)

• 2.) .next('tr')

  We're arriving at 2.)

• 3.) .find("img.cc")

  Now, we hopefully found element at 3.)

• 4.) .toggle()

  We switch visibilty from element 4.) (visible/hidden)

• 5.) .closest('tr')

  We jump back to the closest parent tr

• 6.) siblings('tr')

  We receive all tr's marked with 6.)

• 7.) .find("img.cc").hide();

  Find the img.cc within all siblings tr's -> 6.) and hide them.