导航到无序列表中的上一级列表元素

Question

我试图导航通过无序列表，并有麻烦使其完全工作。

有4个按钮 - 截至，向下，左，并右。使用向上导航或向下导航将正确带您前往或下一个<li>（垂直）在该级别（如果存在）。导航右会带您到<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> 

当前的功能级别：

使用向上和右按钮，就可以成功地浏览到 “八”。期望的是，当你点击Left按钮，回到顶端，你会去“六”（不是“四”），然后是“三”（而不是“一”）。现在，我什么都没有。

我以为使用parent() jQuery函数是要走的路，但我必须写错了。

我想每一次我通过点击，我可以添加/删除一个类（“最后一游”），并在“回归”上做一个发现。我想先知道我在编写的代码中做了什么错误。

如果有人能指出我正确的方向，我会很感激。

Answer 1

试试这个。您需要导航到li其父母ul为4,5,6跨越

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

http://jsfiddle.net/go0yjoae/1/

Answer 2

你需要改变：

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的实例。

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