Функция слайдера jQuery прерывается при добавлении дополнительного div

Приведенная ниже функция действует как аккордеон слайдера (для списка сообщений Wordpress) и выполняет ряд действий, таких как переключение, добавление активных классов и «отключение» открытого переключателя div. Работал нормально с тремя div - .entry-post, .entry-title и .entry-content - пока... подождите... Мне нужно было добавить еще один div в разметку.

Другой div, который мне нужно было добавить, предназначен для даты публикации, и с этим четвертым div действие аккордеона прерывается, потому что функция работает при определении следующего div.

Как я могу заставить эту функцию учитывать и игнорировать div даты, который я должен был добавить в разметку? (Я не могу изменить div на диапазон.)

JSfiddle здесь: http://jsfiddle.net/WnpGv/53/

Функция:

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.next(".entry-content");
    if (! $this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

Базовая разметка:

<div class="entry-post">

    <h2 class="entry-title">Post Title 1</h2>

    <div class="thedate">(publication date)</div> <!--this is the div I added -->

<div class="entry-content">Lorem Ipsum  Lorem Ipsum</div></div>

jquery slidetoggle jquery-ui-accordion
person markratledge    schedule 02.06.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете изменить next(), он всегда смотрит на следующий родственный элемент:

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

[выделено мной.]

Однако вы можете использовать parent() и find():

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.parent('.entry-post').find(".entry-content");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

JS-скрипт.

Отредактировано для использования closest('.entry-post') вместо parent('.entry-post'):

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.parent('.entry-post').find(".entry-content");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

JS-скрипт.

Использованная литература:

person David says reinstate Monica    schedule 02.06.2011
comment
Ах, это отлично работает. особ. второй, как я забыл, я использую одну и ту же функцию для другой разметки на одном и том же сайте - разметка, которая не имеет дополнительного элемента div thedate - и, используя ближайший вместо родительского, этот продолжает работать. Все еще изучаю этот материал. Спасибо! - person markratledge; 03.06.2011
comment
@songdogtech: рад, что помог! :) - person David says reinstate Monica; 03.06.2011