Why $('a.current').parent('li').addClass('current'); is not working?

Question

Why $('a.current').parent('li').addClass('current'); and $(this).hasClass('current').parent('li').addClass('current'); are not working?

a click event must add li.current http://jsfiddle.net/laukstein/ytnw9/

Update: Dropbox is Down, so I updated http://jsfiddle.net/laukstein/ytnw9/1/ with full 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');
});​

EDIT: Adding HTML from jsFiddle link that was omitted from question

<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

$(this).hasClass('current').parent('li').addClass('current'); certainly won't work, because hasClass returns a boolean value (true/false) not the jQuery object. You can't continue chaining after you have called it.

You can use filter instead:

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

Answer 2

You only seem to be using that bit of code in the changeTab function.

This only seems to be called when using the cursor keys.

If I go to your demo and use cursor keys the orange highlight moves around. If I click it doesn't but there isn't any code that picks up clicks that I can see...

Edit to add: (converted from comment and realised it was actually an extension to my answer)

After looking at the tabs code that you pointed me at I'm still not sure it is calling the code in the changeTab function.

If I change the tabs declaration to

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

then it will highlight the clicked cell but of course won't deselect the old one because the current index has already changed.

I've put a crude fix in for that that can be seen at jsfiddle.net/bhvYM (a fork). That involves clearing all li.current classes before setting the new one. Its a bit hacked so may not be doing everything exactly as you want (I didn't look closely at the current/newCurrent code) but hopefully its a start that will help you get it working to where you want.

My thought is that this now at least puts the li class on which I think is the thrust of your question. If it is not then I have totally missed the point here. :)