Question

假设这种结构：

<li class="page-title">Global</li>
<ul>
    <li class="element">Design Elements</li>
    <li class="page-title">Alerts</li>
    <ul>
        <li class="element">Alert 1</li>
        <li class="element active">Alert 2</li>
        <li class="element">Alert 3</li>
        <li class="element">Alert 4</li>
        <li class="element">Alert 5</li>
    </ul>
</ul>
<li class="page-title">Accounts</li>
<ul>
    <li class="element">Accounts Main</li>
</ul>

无论嵌套结构如何，我如何逐步浏览.element元素？

目前，我正在使用.next('.element')，但在元素集的顶部或底部，它开始返回空值。

我想避免使用某种“如果这是集合中的最后一个，设置一个级别并在可能的情况下返回”逻辑。

编辑：我应该澄清一下，我正在寻找上下键入上下键的列表，所以我需要能够选择实际的相对下一个元素来获取{{1} }。

因此，假设我们处于警报2，我遗漏的函数基于data-job属性运行。我们点击了向上键，它转到警报1，再次运行该功能。我希望能够再次按下向上键，然后弹出“设计元素”。

Answer 1

然后使用常规选择器，而不是next()。

$('.element').each(function() {
      alert($(this).text());
})

Answer 2

我能够自己解决这个问题！

我还包括观看上下键的位。

$(window).keyup(function(e){

    if (e.keyCode == 40){
        var next_element = $('.active').next('li.element');

        if($('.active').is('li:last-of-type' || 'li:only-of-type')){

            next_element = $('.active').parent().nextAll().eq(1).children('.element:first-of-type');
        }   
            elementExpand(next_element);
                }

    if (e.keyCode == 38){
        var prev_element = $('.active').prev('li.element');

        if($('.active').is('li:first-of-type' || 'li:only-of-type')){
            prev_element = $('.active').parent().prevAll().eq(1).children('.element:last-of-type');

        }
            elementExpand(prev_element);


    }
})

这不是最好的，但它确实有效。

无论嵌套如何，都可以使用.next（）查找元素

2 个答案: