Обход элементов списка с помощью jquery - PullRequest
Новая
       12

Обход элементов списка с помощью jquery

0 голосов
/ 13 сентября 2009

Я сейчас создаю микро-сайт, и у меня проблема. Я хочу, чтобы перейти к различным элементам списка, нажав на мое меню. Это работает нормально. Но проблема в том, что при использовании индекса списка для перехода ко второму или третьему элементу mainmenu его нормально работает только в первом меню, поскольку индекс второго меню начинается с 3, добавляя к первому. Так что .mainmenu.children неправильный вызов, но я не знаю правильный.

Итак, вопрос в том, как выбрать индекс списка только по его родительскому меню? Я не хочу использовать три разных идентификатора, потому что меню должно быть динамическим.

надеюсь, кто-то может мне помочь.

С наилучшими пожеланиями

ч-man24 

$('.mainmenu').children('li').click(function(){     
    var myIndex = $('.mainmenu li').index(this);
    alert(myIndex + "  " + myPosition);
    var myPosition = $('#page > li').eq(myIndex).offset().top;
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'});  
});

HTML: 

<ul>
<li>
    <div>
    <ul class="mainmenu">
    <li>Link to 1</li> (index 0)
    <li>Link to 2</li> (index 1)
    <li>Link to 3</li> (index 2)
    </ul>
    <div>Content 1></div>
    </div>
</li>
<li>
    <div>
    <ul class="mainmenu">
    <li>Link to 1</li> (index 3, should be 0)
    <li>Link to 2</li> (index 4, should be 1)
    <li>Link to 3</li> ....
    </ul>
    <div>Content 2></div>
    </div>
</li>
<li>
    <div>
    <ul class="mainmenu"> 
    <li>Link to 1</li>
    <li>Link to 2</li>
    <li>Link to 3</li>
    </ul>
    <div>Content 3></div>
    </div>
</li>

1 Ответ

2 голосов
/ 13 сентября 2009

Как насчет: 

$('.mainmenu li').click(function(){

    var myIndex = $(this).closest('.mainmenu').children('li').index(this);
    alert(myIndex + "  " + myPosition);
    var myPosition = $('#page > li').eq(myIndex).offset().top;
    $('html, body').animate({scrollTop:myPosition, duration:500, easing:'easeInOutCirc'});      
    });
...