jQuery 선택기의 범위를 올바르게 설정하십시오.

Question

안녕하세요 여러분, jQuery 선택기의 범위를 제한하는 데 문제가 있습니다.

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

더 많은 목록 요소가 있지만 간결성을 위해 그들을 포함하지 않았다 다음과 같이 나는 구조 정렬되지 않은 목록에 따라 슬라이드 쇼 위젯을 만들었습니다. 기본적으로 각 캡션은 표시된 클래스를 표식으로 사용하여 전환됩니다. 다음과 같이, 스위칭 용 실제 코드는 다음

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

}  

제가하는 데 문제는 자막 ID가 정렬되지 않은리스트의 두 번째 목록 요소 만 중첩 된 목록을 표시 그것에 중첩리스트 요소를 갖는다는 것이다 한 번에 하나의 요소!

나는이 선택기의 범위를 제대로 제한하지 않는다고 가정합니다. $ ('caption li.visible'); 그러나 목록의 한 수준 만 선택하도록 선택기를 제한하는 방법을 알아낼 수 없었습니다. 나는 이것이 newb-ish 두뇌가 복잡하지 않다는 것을 확신한다.

Answer 1

목록의 "한 수준"이 무슨 뜻인지 잘 모르겠습니다. 첫 번째 일치하는 눈에 보이는 요소를 원하는 경우에 당신은 당신이 정말하지 않는 것이 내부 자막 또는 LI

$('.visible:first'); 

Answer 2

당신이 .children()을 사용할 수는 있다고 수식 할 필요가 제공하는 다음

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

을하거나 수

$('#caption').children() 또는 $('#caption').children('li')

당신이 문서에 (위의 링크)를 이동하는 경우가 HA : 첫 번째 레벨 요소를 얻을 수 중첩 된 목록이있는 예제도 있습니다.

또한, 목록의 다음 요소를 얻기 위해 간단히 수행 할 수

다시 첫 번째로 루프를 원한다면 물론

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

, 당신은 현재의 마지막임을 감지 할 수 있습니다 하나 그리고 할 :

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