jQuery - Как использовать parent () для доступа к уровням 1 и 2? - PullRequest
Новая
       9

jQuery - Как использовать parent () для доступа к уровням 1 и 2?

0 голосов
/ 13 мая 2011

У меня есть HTML, который выглядит так: 

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div>
      <fieldset id="multistep-group_attendees" class="group-attendees">
          <div class="vertical-tab-navigation">
            <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
            <a class="next-tab" title="Continue to next step" href="#">Next</a>
          </div>
      </fieldset>
   </div>   
</fieldset>

Итак: 3 набора полей с вертикальными вкладками, каждый с разделителем навигации внизу. Но 3-й набор nav вложен на два уровня глубже остальных.

jQuery вроде так: 

$(".next-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().next('fieldset.vertical-tabs-pane').show();
    return false;
});

$(".previous-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().prev('fieldset.vertical-tabs-pane').show();
    return false;
});

Это отлично работает для первых двух наборов полей; щелкнув «назад» и «следующий», вы перейдете к следующему набору полей. Но он не работает для 3-го набора, хотя мне кажется, что он все равно должен пройти по дереву до соответствующего родительского набора полей.

Что мне нужно изменить? Я в порядке, если у меня есть специальные функции $("#multistep-group-attendees .next-tab") для третьего набора полей, если это облегчает задачу.

Спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 13 мая 2011

Следующий код должен сделать это 

$(".next-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var next = current.next('fieldset.vertical-tabs-pane');
    if (! next.length ) next = current.siblings(':first');
    current.hide();
    next.show();
    return false;
});

$(".previous-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var prev= current.prev('fieldset.vertical-tabs-pane');
    if (! prev.length ) prev = current.siblings(':last');
    current.hide();
    prev.show();
    return false;
});

Использование closest() и проверка следующего / предыдущего существования, кажется, добиваются цели ..

демо http://jsfiddle.net/gaby/VbgDg/

1 голос
/ 13 мая 2011

Проблема может быть не в методе parents, а в методах next и prev.Эти методы не повторяются (попробуйте демо ).Если предыдущего элемента нет, prev не выберет последний и next работает так же.

...