正确设置jQuery选择器的范围

Question

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:

<ul id="caption">
            <li class="visible">
                <p>
                   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.
                </p>
                <a href="#" class="button">Let's Go</a>
            </li>
            <li>
                <h2>TurboMove</h2>
                <p>
                    An automated optimization solution that helps carriers:
                      <li>Extend TDM network lifecycles</li>
                      <li>Decrease operating expenses (OPEX)</li>
                      <li>Decrease total cost of ownership (TCO)</li>
                      <li>Decrease carbon footprint</li>

                </p>
                <a href="#" class="button">Let's Go</a>
            </li>
            <li>
                <h2>Exodus</h2>
                <p>
                    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.
                </p>
                <a href="#" class="button">Let's Go</a>
            </li>

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:

   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');

}       

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!

I'm assuming that I haven't limited the scope of this selector properly $('#caption li.visible'); 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.

Answer 1

I'm not entirely sure what you mean by "one level" of the list. If you want the first matched visible element you could do the following

$('#caption li.visible:first');

Or, providing you don't really need to qualify that it's inside caption or an LI

$('.visible:first');

Answer 2

You can use .children() to get the first level elements:

$('#caption').children() or $('#caption').children('li')

If you go to the docs (the link above) they have an example with nested lists as well.

Also, to get the next element in the list you can simply do:

var nextImage = currentImage.next();
var nextCaption = currentCaption.next();

Of course if you want it to loop back to the first one, you can detect that the current one is the last one and do:

if(currentImage.next().length == 0) { 
  nextImage = currentImage.parent().children().first(); 
}