ближайшая функция jquery не работает с addClass - PullRequest
Новая
       6

ближайшая функция jquery не работает с addClass

0 голосов
/ 15 января 2011

У меня проблема с ближайшей функцией из jquery. Я хочу сделать меню, где вы можете нажать несколько пунктов. что я хочу знать: если кто-то щелкнул по уже выбранному элементу в меню, есть ли выбранный элемент перед только что отмененным элементом. я нашел ближайшую функцию, которая возвращает 1, если есть объект dom, который соответствует селектору, и 0, если нет. поэтому я добавляю класс, выбранный для каждого элемента меню, по которому щелкнули, и удаляю его при повторном нажатии.

когда вы нажимаете menu_2, затем menu_3, а затем снова menu_3, ближайшим значением должно быть 1, потому что перед выбранным элементом отменяется выделенный элемент.

но это не результат моего маленького сценария, может быть, вы что-то знаете?

С уважением, питер 

   $('li').click(function()
     {
      if ($(this).hasClass('selected'))
      {
       $(this).removeClass('selected');
       alert($(this).closest('.selected').size());
      }
      else
      {
       $(this).addClass('selected');
      }
   });

  .selected
  {
   background-color: red;
  }

<ul>
<li>menu_1</li>
<li>menu_2</li>
<li>menu_3</li>
<li>menu_4</li>
<li>menu_5</li>
</ul>

это моя структура: 

menu_0 <- selected
 menu_0_0
 menu_0_1
 menu_0_2 <- selected
   menu_0_2_0
   menu_0_2_1 <- selected
menu_1
...

Теперь я отменил выбор menu_0_2_1, и функция ближайшая должна дать мне объект DOM menu_0_2, потому что это самый близкий объект, у которого есть класс «selected», как видно в примере выше.

1 Ответ

0 голосов
/ 15 января 2011

Вас смущает цель closest():

Получите первый предок элемент, который соответствует селектору, начиная с текущий элемент и прогресс через дерево DOM.

Если вы тоже хотите получить братьев и сестер, используйте siblings(), если хотите немедленное следующее использование next() ..etc: 

$(document).ready(function() {
    $('li').click(function() {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            alert('Closest: ' + $(this).closest('.selected').length);
            alert('Siblings: ' + $(this).siblings('.selected').length);
        }
        else {
            $(this).addClass('selected');
        }
        return false;
    });
});

Пример ссылки . return false; важен для предотвращения эффекта пузырьков!

...