javascript - jQuery 遍历文本出现

Question

我需要能够遍历页面上给定文本的下一次出现。就像几乎所有软件上最常见的“查找”功能一样(F3 - 查找下一个)。

我正在尝试使用 jQuery 来做到这一点，但无法以任何方式使其工作。尝试过:NextAll()、next()、closest()(似乎有问题)、find()、eq()、children() 等，等等。

下面是一个有效的示例，但它会转到页面上的最后一个元素并且不会循环遍历。

function scrollMe(tow){
    var targetOffset = $("*:contains('"+tow+"'):last").offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
}

为了清楚起见，我的页面有一组行(div)，里面有文本。每次用户单击此行时，它都必须轻轻向下(或向上)滚动到出现文本(如果有)的下一行。

示例:

<div onclick="scrollMe('hello');">hello</div>
<div onclick="scrollMe('world');">world</div>
<div onclick="scrollMe('foo');">foo</div>
<div onclick="scrollMe('hello');">hello</div>
<div onclick="scrollMe('bar');">bar</div>

确实应该用 jQuery 括起来，但这只是为了说明。

Answer 1

Here is a working example of scrolling to the next occurrence and highlighting it .

由于您将使用变量作为 contains 的输入，我建议您跳过选择器。它很快，但您将难以保持变量输入的清洁。

例如，这将突出显示出现“两个”的所有文本 (fiddle example):

jQuery(function($) {
   var findText = 'two';
    $('*').filter(function() {
        return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0;
    }).addClass('hilite'); 
});

要使其与某种查找下一个功能一起使用，您需要一个变量来跟踪当前索引，以及某种触发器:

jQuery(function($) {
   // stores the currently highlighted occurence
   var index = 0;
   var findText = 'sed';

   // you could do this inside the click as well, here, it's cached/faster
   // inside click, it would be more dynamic and prevent memory leaks
   // just depends on your needs
   // you would also want to start with a parent element as $('*') is costly!
   var $occurrences = $('*').filter(function() {
       return $(this).children().length < 1 && $(this).text().indexOf(findText) >= 0;
    });

    // remove existing highlights, then find the next occurrence and highlight it
    $('#trigger').click(function() {
       if( index == $occurrences.length-1 ) { index = 0; }
       $occurrences.find('span.hilite').replaceWith(findText);
       var $next = $occurrences.eq(++index);
       $next.html( $next.html().replace(findText, '<span class="hilite">'+findText+'</span>') );
       $(document).scrollTop($next.offset().top-35);
       return false;
    });

    // scroll our trigger link when the screen moves so we can click it again
    $(window).scroll(function() {
        var top = $(window).scrollTop();
        $('#trigger').offset( {top: top, left: 0} );
    });

});