Question

I posted a question 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

<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.