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

如果你去了docs（上面的链接），他们也有一个嵌套列表的例子。

此外，要获取列表中的下一个元素，您只需执行以下操作：

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

当然，如果你想让它循环回到第一个，你可以检测到当前的那个是最后一个并且执行：

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

正确设置jQuery Selector的范围

2 个答案: