正确设置 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'); 但我无法弄清楚了解如何限制选择器仅选择列表的一级。我确信这并不是因为我的新手大脑无法解决而变得复杂的事情。

Answer 1

我不完全确定您所说的列表的“一级”是什么意思。如果您想要第一个匹配的可见元素，您可以执行以下操作

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

或者，前提是您实际上不需要限定它在标题或 LI 内

$('.visible:first');

Answer 2

您可以使用 .children() 获取第一级元素：

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

如果您转到文档（上面的链接），他们有一个带有嵌套列表的示例以及。

另外，要获取列表中的下一个元素，您可以简单地执行以下操作：

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

当然，如果您希望它循环回到第一个元素，您可以检测到当前元素是最后一个元素并执行以下操作：

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