Question

Backstory：我在HTML中搜索过一个短语，它会在每个实例周围放置一个范围。因此，如果我搜索Lorem，那个单词出现的每个地方都会显示如下：

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

这给了它一点亮点。非常第一个实例给出了一个不同的类，其中有一个更加鲜明的亮点：

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

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

.highlight-current

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

如果你不删除＆＃39; live-search-highlight＆＃39;类，而是递增您存储的索引。这允许您在文档中循环回来，并且可以轻松实现前进/后退控制。

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/

Answer 3

问题是你的代码通过它的父母的兄弟姐妹寻找下一个.live-search-highlight。这是第一次使用，因为第一个高亮显示的父级与第二个高亮显示处于同一级别。之后它不起作用，因为它在身体的兄弟姐妹中寻找亮点。

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

你必须存储：

突出显示并遍历数组而不是树遍历，或
当前突出显示突出显示的索引

Answer 4

这应该有用。

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

通过类一次选择jQuery，选择下一个元素

4 个答案: