title: Get the current section in Jquery
body: <p>I'm stuck with a JQuery script. The structure is something like that:</p>
  
  <pre><code>&lt;section class="slider" id="1"&gt;
      &lt;section class="photo-home"&gt;
          &lt;img src="images/media/the_file1.jpg" /&gt;
      &lt;/section&gt;           
      &lt;section class="photo-home"&gt;
          &lt;img src="images/media/the_file2.jpg" /&gt;
      &lt;/section&gt;
              &lt;!-- ... etc --&gt;
  &lt;/section&gt;
  
  &lt;section class="controls"&gt;
      &lt;a name="prev"&gt;PREV&lt;/a&gt;
      &lt;a name="next"&gt;NEXT&lt;/a&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The problem is to get the current .photo-home selected. Considering I have lots of '.slider' identifying with different id's. BTW I'm adding the class .current to the current .photo-home section. The problem is to enable/disable the buttons (next/prev)... Does anybody know how to do it?</p>
  
  <p>This is the JQuery</p>
  
  <pre><code>&lt;script&gt;
      $('.slider-photo .photo-home:first-child').addClass('current');
  
      $('.slider-photo a[name="prev"]').click(function() {
          var id = $(this).parent().parent().parent().find('.slider-photo').attr('id');
          var curr = // HERE IS WHERE I AM STUCK :(
              if (curr &gt; 0){
                  $(this).parent().parent().find('.current').removeClass('current').prev().addClass('current');
              }
      });
      $('.slider-photo a[name="next"]').click(function() {
          var id = $(this).parent().parent().parent().find('.slider-photo').attr('id');
          var total = $(this).parent().parent().parent().find('.photo-home').length;
          var curr = // HERE IS THE PROBLEM! :(
          if (curr &lt;= total){
              $(this).parent().parent().find('.current').removeClass('current').next().addClass('current');
          }
      });
  &lt;/script&gt;
  </code></pre>