How to select the 2nd child of a 'closest' parent?

How to select the 2nd child of a 'closest' parent?

Hello all.

I am trying to figure out the syntax for the following. For this version I am simply trying to select the 2nd child of the SLIDE HOLDER div. For this test I am just making the width grow. My next pass will be to get the index of the DOT clicked and then pass it to the child of the other parent. Please see line 24. I know this is incorrect but placed it to give you an idea of what I am trying to accomplish. Thanks!!


  1. <div class="slide_holder">
  2. <div class="slide">XXX</div>
  3. <div class="slide">I AM THE SECOND CHILD</div>
  4. <div class="slide">XXX</div>
  5. <div class="slide">XXX</div>
  6. </div><!-- END slideHolder -->

  8. <div class="slide_dot_holder">
  9. <div class="slider_dot">&nbsp;</div>
  10. <div class="slider_dot">CLICK ME HERE TO RUN FUNCTION</div>
  11. <div class="slider_dot">&nbsp;</div>
  12. <div class="slider_dot">&nbsp;</div>
  13. </div><!-- END slideDotHolder -->



  17. <script>

  19. spotlight1_rw_slide_show();

  21. $('.slider_dot').click(function(){

  23.   var index = $('.slider_dot').index(this)+1;
  24.    $(this).closest('div.slide_holder').children().('.slide:nth-child(2)').css({'width':'200px'});

  26. });

  28. </script>

Thanks again
Rich