javascript - 导航到无序列表中的上层列表元素

Question

我正在尝试浏览一个无序列表，但无法使其完全正常工作。

有 4 个按钮 - Up、Down、Left 和 Right。使用 Up 或 Down 导航将正确带您到上一个或下一个 <li> (垂直)在该级别上，如果存在的话。 Right 导航将带您到 <ul> 中(下一级)的第一个列表项。 , 如果 <ul>存在。

左键基本上应该颠倒顺序(上升一个级别)，但事实并非如此。

这是我的代码:

CSS

<style>
    .btn { margin: 10px; padding: 10px; background-color: #999; cursor: pointer; display: inline-block; }
    .current > span { color: red; font-weight: bold; }
</style>

HTML

<div class="left btn">Left</div>        
<div class="right btn">Right</div>      
<div class="up btn">Up</div>        
<div class="down btn">Down</div>

<ul id="demo01">
    <li class="current"><span>one</span></li>
    <li><span>two</span></li>
    <li><span>three</span>
        <ul>
            <li><span>four</span></li>
            <li><span>five</span></li>
            <li><span>six</span>
                <ul>
                    <li><span>seven</span></li>
                    <li><span>eight</span></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><span>nine</span></li>
</ul>

JS/JQuery

<script>
(function($) {
    $(document).on('click','.right', function() {
        var current = $('#demo01 li.current');
        if(current.has("ul").length){
            right = current.find('li').first();
            current.removeClass('current');
            right.addClass('current');
        }
    });

    $(document).on('click','.left', function() {
        var current = $('#demo01 li.current');
        if( current.parent.has('ul').length) {
            left = current.parent('ul li');
            current.removeClass('current');
            left.addClass('current');
        }           
    });

    $(document).on('click','.up', function() {
        var current = $('#demo01 li.current');
        if( current.prev('li').length) {
            up = current.prev('li');
            current.removeClass('current');
            up.addClass('current');
        }
    });

    $(document).on('click','.down', function() {
        var current = $('#demo01 li.current');
        if( current.next('li').length) {
            down = current.next('li');
            current.removeClass('current');
            down.addClass('current');
        }
    });
}(jQuery));
</script>

当前的功能级别:

使用 Up 和 Right 按钮，您可以成功导航到“八”。预期是当您单击 Left 按钮返回顶部时，您会转到“六”(而不是“四”)，然后是“三”(而不是“一”) .现在，我一无所获。

我想使用 parent() jQuery 函数是可行的方法，但我一定是写错了。

我想每次点击时，我都可以添加/删除一个类(“上次访问”)，然后在“返回”时对其进行查找。我想首先知道我写的代码有什么问题。

如果有人能指出正确的方向，我将不胜感激。

Answer 1

你需要改变:

if( current.parent.has('ul').length) {

到:

if( current.parent().has('ul').length) {

parent 不是 current 对象的属性。它是函数 parent() 。

---

您还需要更改这一行:

left = current.parent('ul li');

到:

<罢工>

<罢工>

left = current.parents('li');

<罢工>

left = current.parent('ul').parent('li'); // params are optional

上面选择的是直接(上一级)祖先 ul 及其内部 li(这是当前的 current 元素)。然后，它使它不是 current 。因此，这是行不通的。

修改后的行 寻找 任何祖先(可以超过一级) 上升两级以到达正确的<li>元素。

请参阅 JSFiddle.net 处的工作示例。

编辑 请参阅下面的评论。现在这更正确了。