jquery nextuntil фильтрация для нескольких классов

Question

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

У меня есть HTML-код:

<p id="pp1" class="Subsubhead">Stuff</p>
<p>Nonsense</p>
<p>More</p>
<p id="pp7" class="Subsubhead">Meow</p>
<p>Lorem</p>
<p class="subhead">

и у меня есть некоторый javascript, который почти работает как:

function highlight(elemId) {
    var elem = $(elemId);

    elem.nextUntil(".Subsubhead").addClass("snaphighlight");

    //elem.addClass("snaphighlight");
    setTimeout(function () {
        elem.removeClass("snaphighlight")
    }, 1000);
}

$('#navigation a').click(function (event) {
    var elemId = '#' + $(this).attr('href').split('#')[1];
    highlight(elemId);
});

В данный момент этот заголовок не выделяется, но он выделяет теги <p> под ним до следующей подзаголовка. однако, когда следующий p имеет класс Subhead, он продолжает выделять то, что я тоже не хочу. Есть ли способ сообщить об этом nextUntil ".subsubhead"&&".subhead" или что-то подобное? Также мой тайм-аут больше не работает. как я могу это исправить?

Answer 1

Вы применяете класс ко многим элементам, но удаляете его только из одного

Попробуйте:

function highlight(elemId) {
    var elem = $(elemId);
    var highlight=elem.nextUntil(".Subsubhead").addClass("snaphighlight");

    //elem.addClass("snaphighlight");
    setTimeout(function () {
        highlight.removeClass("snaphighlight")
    }, 1000);
}

Ваш синтаксис, использующий ## для селектора jQuery, недопустимиспользуйте один #