正确设置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的范围

回答

相关问题