jquery найти номер индекса вложенного li

ProgramBox

jquery найти номер индекса вложенного li

Post author:admin
Запись опубликована:3 сентября, 2022
Post category:Вопросы по программированию

#jquery #jquery-selectors #event-handling #html-lists

#jquery #jquery-селекторы #обработка событий #html-списки

Вопрос:

Как бы мне получить номер позиции индекса одного из вложенных LI? Я могу получить индекс topnav, но не могу указать номер дочернего индекса subnav (ов).

Я хотел бы динамически создать селектор для таргетинга на subnav на основе индекса topnav.

 <div id="nav_container">
    <ul id="topnav">
        <li><a href="#a">menu item 0</a>
            <ul id="subnav0">
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
            </ul>
        </li>
        <li><a href="#a">menu item 1</a>
            <ul id="subnav1">
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
                <li><a href="#">sub menu item</a></li>
            </ul>
        </li>
        <li><a href="#">menu item 2</a></li>
        <li><a href="#">menu item 3</a></li>
     </ul>
</div>

Мой код jQuery

  //Event Handler
 function nav_execute(){
    var _index = $('#topnav > li').index(this);//Returns index number of topnav item selected
    var _subnav = '#subnav'  _index.toString();
    var _selector = _subnav   ' > li'.toString();//the subnav selector
    var _subindex = $(_selector).index();//gets total num of index's
}

//Binded event
$('#topnav > li').bind('click', nav_execute);

Ответ №1:

С оговоркой, что я действительно не уверен, что понял, к чему вы стремитесь, попробуйте заменить ваш javascript на:

 $('#topnav  li').bind('click', function (){
  alert($(this).index());   
});

Смотрите Полный пример здесь
(это не решение. Это способ увидеть, какие элементы запускают события и в каком порядке).

Ответ №2:

Итак, я ДУМАЮ, вы пытаетесь сказать, что я хочу получить ul «subNav», содержащийся в любом «#topNav> li», который был нажат?

Если это то, что вы пытаетесь сделать, то это должно сработать

 //Event Handler
 function nav_execute(){
    var $subNav = $(this).find("ul");

    //I'm not sure what you are trying to do here so im not going to change the functionality
    var subindex = $subNav.index();//gets total num of index's
}

//Binded event
$('#topnav > li').bind('click', nav_execute);

Редактировать:

Согласно вашему комментарию, вот jsfiddle того, что вы хотите: http://jsfiddle.net/wuFB7/4 /

Вы можете просто создать селектор для этих вложенных li напрямую. Однако, поскольку вы сказали, что они генерируются динамически, я изменил «.bind» на «.live», поскольку это позволит прикреплять обработчики событий к элементам, созданным после начальной загрузки страницы.

1. По сути, я просто пытаюсь получить номер позиции индекса элемента LI в subnav на основе события click. Если я нажму на третий LI в subnav0, я хотел бы иметь возможность возвращать число 2. Причина в том, что меню создаются динамически, и это основной механизм отслеживания.

2. Спасибо, это круто, но есть ли способ провести различие между верхним LI и щелчком subnav LI? Таким образом, оповещение будет указывать позицию верхнего номера индекса LI и позицию номера индекса subnav LI.

3. Я обновил jsfiddle. Я думаю, это то, что вы хотите. в предупреждении теперь отображается индекс subnav и индекс li в topnav.

4. Спасибо Киту. Это близко, но я начинаю думать, что jquery может быть правильным инструментом. Я действительно просто хочу обновить переменные. Если пользователь нажимает на topnav, параметр topnav обновляется и очищает параметр subnav, и в вашем примере, если пользователь нажимает на subnav, обе переменные обновляются. Я просто не могу понять, как узнать, на что они нажали.

Ответ №3:

 This code seems to have solved my problem. This checks the parent 'id' and then performs a simple conditional statement to determine which nav was clicked. It then stores the index(s) to their master vars.


 function nav_execute(e){

    var id = $(this).parent().attr("id").toString();

    if(id == "topnav"){
        _index = $(this).index();
        _subindex = null;
    }else{
        _index = $(this).parent().parent().index();
        _subindex = $(this).index();    
    }

    console.log('_index: '   _index);
    console.log('_subindex: '   _subindex);

    return false;   
}


$('#topnav > li').live('click', nav_execute);


Thanks for the help from everyone!

Метки: jquery найти номер индекса вложенного li