正確設置jQuery Selector的範圍

嘿，我有一個限制jQuery選擇器範圍的問題。我創建了一個幻燈片的小工具，取決於一個無序列表上的結構如下：正確設置jQuery Selector的範圍

<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'）;但我一直未能弄清楚如何限制選擇器只選擇列表的一個級別。我敢肯定，這並不是因爲我的新手腦子並不複雜。

來源

2010-08-20 mrGupta

我不完全確定你是什麼意思的「一級」的名單。如果你想第一個匹配可見元素，你可以做以下

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

或者提供你並不真的需要限定它的內部字幕或LI

$('.visible:first');

來源

2010-08-20 19:42:20

對不起，誤會。我的意思是我想讓幻燈片顯示在包含無序列表中的列表元素（在本例中使用id =「caption」）翻轉，而不翻過任何嵌套列表。我基本上想要從幻燈片切換中分離嵌套的無序列表。 – mrGupta 2010-08-21 18:30:48

您可以使用.children()來獲得第一級元素：

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

如果你去的文檔（上面的鏈接），他們公頃還有一個嵌套列表的例子。

同時，爲了在列表中的下一個元素，你可以簡單地做：

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

當然，如果你想讓它循環回到第一個，你可以檢測到當前是最後一個一個和做：

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

來源

2011-12-01 02:26:28 Muhd

正確設置jQuery Selector的範圍

回答

相關問題