Почему $ ('a.current'). Parent ('li'). AddClass ('current'); не работает?

Question

Почему $('a.current').parent('li').addClass('current'); и $(this).hasClass('current').parent('li').addClass('current'); не работают?

a событие щелчка должно добавить 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');
});​

РЕДАКТИРОВАТЬ: Добавление HTML из ссылки jsFiddle, которая была опущена в вопросе

<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() вернет только непосредственный родительский элемент.

Если элемент не напрямую в элементе <li>, .parent('li') вернет пустой набор.

Возможно, вам нужно вызвать .closest('li').
РЕДАКТИРОВАТЬ : <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 перед установкой нового.Он немного взломан, поэтому, возможно, не делает все точно так, как вы хотите (я не присматривался к текущему / newCurrent-коду), но надеюсь, это начало, которое поможет вам заставить его работать там, где вы хотите.

Я думаю, что теперь это, по крайней мере, ставит класс li, на котором, я думаю, стоит твой вопрос.Если это не так, то я полностью упустил суть здесь.:)