使用 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

Answer 2

问题是您的代码通过其父级的兄弟姐妹查找下一个.live-search-highlight。这是第一次工作，因为第一个亮点的父级与第二个亮点处于同一级别。此后它就不起作用了，因为它会在身体的兄弟姐妹中寻找亮点。

body
    h1
        highlight1 -> parent = h1   (has highlight siblings)
    highlight2     -> parent = body (doesn't have any siblings)
    highlight3

您必须存储：

1. 高亮并遍历数组而不是遍历树，或者
2. 当前突出显示的索引

Answer 3

这应该可行。

var item_count = 0

$('.button').click(function(){
    $('.live-search-highlight').eq(item_count - 1).removeClass('highlight-current');
    $('.live-search-highlight').eq(item_count).addClass('highlight-current');
    item_count++

});

JSFiddle

Answer 4

如果您不删除“live-search-highlight”类，而是增加您存储的索引，这会有所帮助。这使您可以在文档中循环返回，并使实现前进/后退控制变得容易。

var currentIndex = 0,
totalMatches = 0,
currentClass = 'highlight-current',
normalClass = 'live-search-highlight';

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

    var matches = $('.'+normalClass);

    totalMatches = matches.length;

    if(totalMatches === 0){
        return;
    }

    var newIndex = (currentIndex === totalMatches - 1) ? 0 : currentIndex + 1;

    matches.eq(currentIndex).removeClass(currentClass);
    matches.eq(newIndex).addClass(currentClass);

    currentIndex = newIndex;

});

检查小提琴：http://jsfiddle.net/e00x5pbd/1/