Can not choose the correct element using parents() or closest()??

Can not choose the correct element using parents() or closest()??

Hello all. Please see below. In line 42 I am trying to select any of the divs within line numbers 9 to 14. If I code it like this

  1.  $('div').closest('.slide_holder').children('div:eq('+RW_index+')').css({'background-color':'#000000'});

or like this

  1.  $('div').parents('.slide_holder').children('div:eq('+RW_index+')').css({'background-color':'#000000'});

it works BUT selects the very first group of divs. I want to choose the first group ABOVE the class="slider_dot" div that is clicked.

Here is the line I am trying to fix

  1.  $('.slide_dot_holder').closest('.slide_holder').children('div:eq('+RW_index+')').css({'background-color':'#000000'});
Please see below for the line in full context (Line 42)

  1. <div class="slide_holder" >
  2. <div class="slide" style="background-color:#FF0000; width:400px; height:5px; margin:10px;">XXX</div>
  3. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX</div>
  4. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX</div>
  5. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX</div>
  6. </div><!-- END slideHolder -->
  7. <br /><br>

  9. <div class="slide_holder" >
  10. <div class="slide" style="background-color:#FF0000; width:400px; height:5px; margin:10px;">I WANT TO CHOOSE ONE OF THESE</div>
  11. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">I WANT TO CHOOSE ONE OF THESE</div>
  12. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">I WANT TO CHOOSE ONE OF THESE</div>
  13. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">I WANT TO CHOOSE ONE OF THESE</div>
  14. </div><!-- END slideHolder -->

  16. <div class="slide_dot_holder">
  17. <div class="slider_dot">&nbsp;</div>
  18. <div class="slider_dot">&nbsp;</div>
  19. <div class="slider_dot">&nbsp;</div>
  20. <div class="slider_dot">&nbsp;</div>
  21. </div><!-- END slideDotHolder -->

  23. <div style="clear:both; height:300px;">CLEAR ME</div>


  26. <div class="slide_holder" >
  27. <div class="slide" style="background-color:#FF0000; width:400px; height:5px; margin:10px;">XXX3</div>
  28. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX3</div>
  29. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX3</div>
  30. <div class="slide" style="background-color:#FF0000;width:400px; height:5px; margin:10px;">XXX3</div>
  31. </div><!-- END slideHolder -->
  32. <br /><br>

  34. <script>

  36. spotlight1_rw_slide_show();

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

  40.   var RW_index = $('.slider_dot').index(this);

  42.  $('.slide_dot_holder').closest('.slide_holder').children('div:eq('+RW_index+')').css({'background-color':'#000000'});

  44. });

  46. </script>


Thanks for your help!
Rich