title: Properly setting the scope of a jQuery Selector
body: <p>Hey guys I'm having a problem limiting the scope of a jQuery selector. I've created a slideshow widget that depends on an unordered list for a structure as follows:</p>
  
  <pre><code>&lt;ul id="caption"&gt;
              &lt;li class="visible"&gt;
                  &lt;p&gt;
                     SwitchPoint Solutions is a leading provider of automated configuration solutions for telecommunications carriers globally.  
                     We offer services in the TDM network optimization, TDM to VoIP migration, and hosted PBX/Contact Centre areas.
                  &lt;/p&gt;
                  &lt;a href="#" class="button"&gt;Let's Go&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;h2&gt;TurboMove&lt;/h2&gt;
                  &lt;p&gt;
                      An automated optimization solution that helps carriers:
                        &lt;li&gt;Extend TDM network lifecycles&lt;/li&gt;
                        &lt;li&gt;Decrease operating expenses (OPEX)&lt;/li&gt;
                        &lt;li&gt;Decrease total cost of ownership (TCO)&lt;/li&gt;
                        &lt;li&gt;Decrease carbon footprint&lt;/li&gt;
  
                  &lt;/p&gt;
                  &lt;a href="#" class="button"&gt;Let's Go&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;h2&gt;Exodus&lt;/h2&gt;
                  &lt;p&gt;
                      Automates the data move during the of the migration TDM to VoIP.  Some of its main features are: automated data move, 
                      data integrity checks, and maintaining recent changes made by the subscriber.
                  &lt;/p&gt;
                  &lt;a href="#" class="button"&gt;Let's Go&lt;/a&gt;
              &lt;/li&gt;
  </code></pre>
  
  <p>there are more list elements but I didn't include them for brevity. Basically each caption is being switched using the visible class as a marker. The actual code for the switching is as follows:</p>
  
  <pre><code>   function autoSlideshow(mode) {
      var currentImage = $('#gallery li.visible');                                      //Determine which slide is visible
      var currentCaption = $('#caption li.visible');
      var currentSlide = $('#controls a.pagination.visible');     
      var transitionSpeed = 750;
  
      if(mode == -1){
          var nextImage = currentImage.next().length ? currentImage.next() :              //Determine the next slide
                      currentImage.siblings(':first');        
          var nextCaption = currentCaption.next().length ? currentCaption.next() :         
                      currentCaption.siblings(':first');
         var nextSlide = currentSlide.next().length ? currentSlide.next() :         
                      currentSlide.siblings(':eq(1)');
      }
      else{
          var nextImage = $('#gallery li:eq('+mode+')');
          var nextCaption = $('#caption li:eq('+mode+')');
          var nextSlide = $('#controls a.pagination:eq('+mode+')');
      }  
  
      currentImage.fadeOut(transitionSpeed).removeClass('visible');
      nextImage.fadeIn(transitionSpeed).addClass('visible');  
      currentCaption.fadeOut(transitionSpeed).removeClass('visible');
      nextCaption.fadeIn(transitionSpeed).addClass('visible');
     currentSlide.removeClass('visible');
      nextSlide.addClass('visible');
  
  }       
  </code></pre>
  
  <p>The problem I'm having is that the second list element in the unordered list with the caption id has a nested list element in it which only displays the nested list one element at a time! </p>
  
  <p>I'm assuming that I haven't limited the scope of this selector properly <strong><em>$('#caption li.visible');</em></strong> but I haven't been able to figure out how to limit a selector to only select one level of the list. I'm sure this isn't something complicated by my newb-ish brain is not working it out.</p>