jQuery —在段落之間使用next（）添加和刪除類

Question

我有一個文檔，並且文檔中帶有.highlight類，跨度很大。 第一個選定的項目上還帶有.currentItem，表明它是當前選定的項目。 我希望能夠在用戶單擊按鈕時瀏覽到下一個突出顯示的項目。 盡我所知，這是應該起作用的功能：

function goNextHighlight() {
    var $active = $('.currentItem');
    var $next = $('.currentItem').next('.highlight');

    $active.removeClass('currentItem');
    $next.addClass('currentItem');
}

$ active的設置正確，並且正在從中刪除currentItem類。 但是，$ next通常不起作用，因為下一個突出顯示的項目在另一個div或段落中。 這是顯示問題的jsfiddle 。 如果單擊兩次下一個按鈕，您將第一次看到它起作用，但是第二次卻沒有。

我如何進行這項工作，以便無論文檔在何處，都將轉到下一個匹配的.highlight？

Answer 1

var $next = $('.highlight').eq($active.index('.highlight')+1);

示例： http ： //jsfiddle.net/Paulpro/qjsjt/1/