Select 下一个元素通过 class 一次一个 jQuery

Question

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

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

这给了它一点 highlight.The 非常 第一个 实例被赋予了不同的 class 具有更明显的亮点，如下所示：

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

问题：我想点击一个按钮，从.highlight-current开始，我想找到.live-search-highlight的下一个实例并切换它的class 到 .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

如果您不删除 'live-search-highlight' class 而是增加您存储的索引，它会有所帮助。这允许您在文档中循环并使实施 forward/back 控件变得容易。

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;

});

检查fiddle：http://jsfiddle.net/e00x5pbd/1/

Answer 2

这应该有效。

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 3

创建一个包含所有突出显示元素的集合更简单。然后使用索引确定 current/next.

的位置

当到达最后一个时，以下将回到开头

// 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');

我会离开主要 class 并且只 add/remove 次要 class

DEMO

Answer 4

问题是您的代码通过 parent 的兄弟姐妹查找下一个 .live-search-highlight。这是第一次起作用，因为第一个突出显示的 parent 与第二个突出显示处于同一级别。此后它不起作用，因为它在 body 的兄弟姐妹中寻找亮点。

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

您必须存储：

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

Select 下一个元素通过 class 一次一个 jQuery

Select next element via class with jQuery one at a time

javascript

jquery

next