How to implement "show next highlight" in jquery.highlight.js

Question

I'm using jquery.highlight.js to highlight some keywords in kendogrid. The size of the kendogrid is very large, so the highlighted keywords are missed easily while scrolling. I was thinking of adding a button on the grid, that will allow user to go to next highlighted keyword. Any idea how to separate out the higlighted keywords?

Answer 1

Ok!! I've done some experiment for you and hope that will atleast fetch some idea to you.

Check this DEMO

$('.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
    });

});