Définir correctement la portée d'un sélecteur jQuery

Question

Hé les gars, j'ai un problème pour limiter la portée d'un sélecteur jQuery. J'ai créé un widget diaporama qui dépend d'une liste non ordonnée pour une structure comme suit:

<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> 

il y a plus d'éléments de la liste, mais je ne les inclut pas par souci de concision. Fondamentalement, chaque légende est commutée en utilisant la classe visible comme marqueur. Le code réel pour la commutation est la suivante:

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

}  

Le problème que je vais avoir est que le deuxième élément de la liste dans la liste non ordonnée avec l'identifiant de légende a un élément de liste imbriquée en elle qui affiche uniquement la liste imbriquée un élément à la fois! Je suppose que je n'ai pas limité la portée de ce sélecteur correctement $ ('# caption li.visible'); mais je n'ai pas été capable de comprendre comment limiter un sélecteur pour ne sélectionner qu'un seul niveau de la liste. Je suis sûr que ce n'est pas quelque chose de compliqué par mon cerveau newb-ish ne fonctionne pas.

Answer 1

Je ne suis pas entièrement sûr de ce que vous entendez par "un niveau" de la liste. Si vous voulez que le premier apparié élément visible, vous pouvez effectuer les opérations suivantes

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

Ou, à condition de ne pas vraiment besoin de se qualifier que c'est légende à l'intérieur ou une LI

$('.visible:first'); 

Answer 2

Vous pouvez utiliser .children() à obtenir les premiers éléments de niveau:

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

Si vous allez à la documentation (le lien ci-dessus), ils ha Un exemple avec des listes imbriquées.

En outre, pour obtenir l'élément suivant dans la liste, vous pouvez simplement faire:

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

Bien sûr, si vous voulez faire une boucle de retour à la première, vous pouvez détecter que l'actuel est le dernier un et faire:

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