javascript - 使用 jQuery 一次通过类选择下一个元素

Question

背景故事:我在 HTML 中搜索了一个短语，它在每个实例周围放置了一个跨度。因此，如果我搜索 Lorem，该词出现的每个地方都将如下所示:

<span class="live-search-highlight">Lorem</span>

这给了它一点亮点。非常第一个实例被赋予了一个不同的类，具有更明显的亮点，如下所示:

<span class="highlight-current">Lorem</span>

问题:我想点击一个按钮，从.highlight-current开始，我想找到.live-search-的下一个实例highlight 并将其类切换为 .highlight-current。我怎样才能用 jQuery 做到这一点？到目前为止，这是我所拥有的，它只能工作一次:

$(document.body).on('click','.button', function(){

    // Find highlight-current, then get the next instance and make that one current

    $('.highlight-current').parent().nextAll(".live-search-highlight").eq(0).removeClass('live-search-highlight').addClass('highlight-current');

    // Reset the previous one so it's no longer current

    $('.highlight-current:first').removeClass('highlight-current').addClass('live-search-highlight');

});

JsFiddle:http://jsfiddle.net/kthornbloom/g5skaek7/3/

Answer 1

创建所有突出显示元素的集合更简单。然后使用索引来确定当前/下一个的位置。

当到达最后一个时，以下将恢复到开始

// create collection of all highlighted elements
var $highlights = $('.live-search-highlight'),
    // isolate the current one from collection and remove the secondary class
    $currHighlight = $highlights.filter('.highlight-current').removeClass('highlight-current'),
    // use index of current to determine next
    nextIndex = $highlights.index($currHighlight) + 1;
// revert to beginning if index is at the end
if(nextIndex === $highlights.length){
    nextIndex = 0;
}
// add secondary class to next (or first) in collection
$highlights.eq(nextIndex).addClass('highlight-current');

我会离开主类，只添加/删除辅助类

DEMO