javascript - 如何在 jquery.highlight.js 中实现“显示下一个突出显示”

Question

我jquery.highlight.js用来突出显示kendogrid. 的大小kendogrid非常大，因此滚动时很容易错过突出显示的关键字。我正在考虑在网格上添加一个按钮，这将允许用户转到下一个突出显示的关键字。知道如何区分突出显示的关键字吗？

Answer 1

好的！！我已经为你做了一些实验，希望至少能给你一些想法。

检查此演示

$('.next').on('click',function(){
    var current=$('.hltxt').find('span.focus');
    var scrollToP;
    var scrollLefT;
    if($('.hltxt').find('span.focus').next('span.highlight').length===0)
    {
        scrollToP=$('.hltxt').find('.highlight:first').position().top-50
        scrollLefT=$('.hltxt').find('.highlight:first').position().left;
        $(current).removeClass('focus');
        $('.hltxt').find('.highlight:first').addClass('focus');
    }   
    else
    {
        scrollToP=$('.hltxt').find('span.focus').next('span.highlight').position().top
        scrollLefT=$('.hltxt').find('span.focus').next('span.highlight').position().left
        $(current).removeClass('focus').next('span.highlight').addClass('focus');
    }
    $('html,body').animate({
        scrollTop:scrollToP,
        scrollLeft:scrollLefT
    });

});