.click, найти следующий элемент класса в родительском элементе, исчезнуть, удалить класс. Повторение

В идеале я пытаюсь щелкнуть div, найти следующий класс внутри родителя. исчезнуть в этом классе, удалить класс.

Нажмите div еще раз, затем найдите следующий класс «страницы», исчезнет, ​​удалите класс.

Любая помощь будет здорово. В настоящее время .find, .next, .nextAll приводят к тому, что все ul со страницей класса исчезают одновременно.

HTML

<div id="container" class="">
    <ul id="page_1">
    <ul id="page_2" class="page">
    <ul id="page_3" class="page">
    <ul id="page_4" class="page">
    </div>

JS

$("#click").click(function() { 
    $("#container").children().closest('.page').fadeIn();
});

click jquery next html-lists
person clazzy    schedule 23.03.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете попробовать:

$("#click").click(function() {
    var active;
    if ($('#container > .active').length) {
        active = $('#container > .active');
        active.removeClass('active');
        active.next().addClass('active');
        active = active.next();
    } else {
        active = $('#container > .page:first');
        active.addClass('active');
    }
    active.fadeIn();
});

(Ваша разметка неверна, это предполагает:)

<div id="container" class="">
    <ul id="page_1"></ul>
    <ul id="page_2" class="page"></ul>
    <ul id="page_3" class="page"></ul>
    <ul id="page_4" class="page"></ul>
 </div>

поиграйте здесь http://jsfiddle.net/kmtCV/2/

person Nicola Peluchetti    schedule 23.03.2012
comment
Работает на меня; Я интерпретировал исходный вопрос как желание удалить страницу: jsfiddle.net/kmtCV/1 Также: только что заметил, что второй щелчок не работает; что-то не так, и я не устранял неполадки. - person Greg Pettit; 24.03.2012
comment
@GregPettit извините, исправил это в моем посте - person Nicola Peluchetti; 24.03.2012
comment
Да, это работает. Я все еще думаю, что пост просит удалить страницу, а также после последнего клика. Если это так (может и не быть!), то это просто вопрос пересмотра времени: jsfiddle.net/kmtCV/3< /а> - person Greg Pettit; 24.03.2012

arrow_upward
0
arrow_downward

Попробуй это.

$('#click').click(function() { 
    $('#container > .page:first').fadeIn();
});
person ShankarSangoli    schedule 23.03.2012
comment
Я думаю, что он хочет сгладить их по одному, но, возможно, я ошибаюсь! - person Nicola Peluchetti; 24.03.2012
comment
Да вроде по одному. - person ShankarSangoli; 24.03.2012

arrow_upward
0
arrow_downward

По мере появления элемента .page вы можете добавить к нему класс visible, который вы исключаете, используя :not в качестве селектора при исчезновении следующего элемента. См. http://jsfiddle.net/rTfcy/.

person Aaron    schedule 23.03.2012