为什么 $('a.current').parent('li').addClass('current');不工作？

Question

为什么 $('a.current').parent('li').addClass('current'); 和 $(this).hasClass('current').parent(' li').addClass('current'); 不起作用？

点击事件必须添加li.current http://jsfiddle.net/laukstein/ytnw9/

更新： Dropbox 已关闭，所以我更新了 http://jsfiddle.net/laukstein/ytnw9/1/ 带有完整的JS

$(function(){
 var list=$('#list'),
     elementsPerRow=-1,
     loop=true,
     // find first image y-offset to find the number of images per row
     topOffset=list.find('a:eq(0)').offset().top,
     numTabs=list.find('li').length-1,
     current,newCurrent;

 function changeTab(diff){
  // a.current set by jQuery Tools tab plugin
  current=list.find('a.current').parent('li').addClass('current').index();
  newCurrent=(loop)?(current+diff+numTabs+1)%(numTabs+1):current+diff;
 if(loop){
   if(newCurrent>numTabs){newCurrent=0;}
   if(newCurrent<0){newCurrent=numTabs;}
 }else{
   if(newCurrent>numTabs){newCurrent=numTabs;}
   if(newCurrent<0){newCurrent=0;}
 }
  // don't trigger change if tab hasn't changed (for non-looping mode)
 if (current!=newCurrent){
   list.find('li').eq(current).removeClass('current');
   list.find('li').eq(newCurrent).addClass('current').find('a').trigger('click'); // trigger click on tab
 }
 }
 list
  // set up tabs
  .tabs("#content",{effect:'ajax',history:true})
  // find number of images on first row
  .find('a').each(function(i){
      // $(this).hasClass('current').parent('li').addClass('current');
      if(elementsPerRow<0&&$(this).offset().top>topOffset){
         elementsPerRow=i;
      }
  });
  // Set up arrow keys
  // Set to document for demo, probably better to use #list in the final version.
 $(document).bind('keyup focus',function(e){
    var key=e.keyCode;
    if(key>36&&key<41){
      if(key==37){changeTab(-1);}              // Left
      if(key==38){changeTab(-elementsPerRow);} // Up
      if(key==39){changeTab(+1);}              // Right
      if(key==40){changeTab(+elementsPerRow);} // Down
      e.preventDefault();
    }
 });
 // toggle looping through tabs
 $(':button').click(function(){
   loop=!loop;
   $('#loopStatus').text(loop);
 });
 $('a.current').parent('li').addClass('current');
});​

编辑：从问题中省略的 jsFiddle 链接添加 HTML

<button>Loop</button> <span id="loopStatus">true</span><br />
<ul id="list">
    <li><a class="current" href="http://dl.dropbox.com/u/6594481/tabs/one.html" title="one">1</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/two.html" title="two">2</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/three.html" title="three">3</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/four.html" title="four">4</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/five.html" title="five">5</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/six.html" title="six">6</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/seven.html" title="seven">7</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/eight.html" title="eight">8</a></li>
    <li><a href="http://dl.dropbox.com/u/6594481/tabs/nine.html" title="nine">9</a></li>
</ul>
<div id="content" style="clear:both;">Loading...</div>​

Answer 1

.parent() 只会返回元素的直接父元素。

如果元素不是直接位于

元素中，.parent('li') 将返回一个空放。

您可能需要调用 .closest('li') .
编辑：

是直接父级；那不是你的问题。

hasClass 函数返回一个布尔值。你的第二行是错误的；您需要调用.filter。

Answer 2

$(this).hasClass('current').parent('li').addClass('current'); 当然行不通，因为 hasClass 返回一个布尔值 (true/false) 不是 jQuery 对象。调用后就无法继续链接。

您可以使用 filter 代替：

$(this).filter('.current').parent('li').addClass('current');

Answer 3

您似乎只在changeTab 函数中使用了那段代码。

这似乎只在使用光标键时被调用。

如果我进入您的演示并使用光标键，橙色突出显示会四处移动。如果我点击它不会，但没有任何代码可以获取我可以看到的点击...

编辑添加：（从评论转换并意识到它实际上是我答案的扩展）

在查看了您指给我的选项卡代码后，我仍然不确定它是否调用了changeTab函数中的代码。

如果我将选项卡声明更改为

.tabs("#content",{effect:'ajax',history:true, onClick:function(){changeTab(0)}})  

，那么它将突出显示单击的单元格，但当然不会取消选择旧的单元格，因为当前索引已经更改。

我对此做了一个粗略的修复，可以在 jsfiddle.net/bhvYM （一个叉子）上看到。这涉及到在设置新类之前清除所有 li.current 类。它有点被黑客攻击，所以可能不会完全按照你想要的方式做所有事情（我没有仔细查看当前/新的当前代码），但希望它是一个开始，可以帮助你让它工作到你想要的地方。

我的想法是，现在至少把 li 类放在我认为是你问题的主旨上。如果不是那么我就完全错过了这里的重点。 :)