Правильная настройка области действия селектора jQuery - PullRequest
Новая
       9

Правильная настройка области действия селектора jQuery

0 голосов
/ 20 августа 2010

Эй, ребята, у меня проблема с ограничением области действия селектора 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');

}

Проблема, с которой я столкнулся, заключается в том, что второй элемент списка в неупорядоченном списке с идентификатором заголовка содержит вложенный список, который отображает вложенный список только по одному элементу за раз!

Я предполагаю, что я не ограничил область действия этого селектора должным образом $ ('# caption li.visible'); , но я не смог выяснить, как ограничить селектор, чтобы выбрать только один уровень списка. Я уверен, что это не что-то сложное, потому что мой мозг новичка не работает.

Ответы [ 2 ]

0 голосов
/ 01 декабря 2011

Вы можете использовать .children () , чтобы получить элементы первого уровня:

$('#caption').children() или $('#caption').children('li')

Если вы перейдете к документам (ссылка выше), у них также есть пример с вложенными списками.

Также, чтобы получить следующий элемент в списке, вы можете просто сделать: 

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

Конечно, если вы хотите, чтобы он вернулся к первому, вы можете определить, что текущий является последним, и выполнить: 

if(currentImage.next().length == 0) { 
  nextImage = currentImage.parent().children().first(); 
}
0 голосов
/ 20 августа 2010

Я не совсем уверен, что вы подразумеваете под "одним уровнем" списка. Если вы хотите первый соответствующий видимый элемент, вы можете сделать следующее 

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

Или, если вам действительно не нужно указывать, что это внутри заголовка или LI 

$('.visible:first');
...