Question

好吧......我放弃了！已经失去了3个小时，但无法找到解决这个问题的方法：

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

我正在尝试使用jQuery，但无法通过任何方式使其工作。尝试：NextAll（），next（），最近（）（似乎有bug），find（），eq（），children（）等等等

Bellow是一个可以正常工作的示例，但它会转到页面的最后一个元素，而不是循环播放。

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

由于你要使用变量作为包含的输入，我建议跳过选择器。它速度很快，但你很难保持变量输入的消毒。

例如，这将突出显示“两个”（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} );
    });

});

Answer 2

好的，为此你应该使用一些东西来找到表格中的文字，然后滚动到那个位置。

我已经制作了一个jsfiddle，向您展示如何找到包含特定文本的表格单元格的顶部位置HERE

这个小提琴按照它们出现的顺序警告两个单词“hello”的顶部位置。您可以使用break（）来查找第一个。

你应该能够利用它来实现你自己的程序，使用jQuery的scrolltop（）将你的屏幕滚动到下一个单词。

Answer 3

function ScrollMe(tow) {
    var id = 'scroll_counter_' + tow;
    var indexStr = 'index';
    var $counter = $('#' + id);
    var animationLength = 1000;
    if ($counter.length == 0) {
      $counter = $('<div></div>').attr('id', id);
      $counter.appendTo('body');
      $counter.data(indexStr, 0)
    }
    var index = $counter.data(indexStr)
    var $items = $("*:contains('"+tow+"')")
    var $item = $($items.get(index))
    $counter.data(indexStr, (index + 1) % $items.length)
    $('html,body').animate({scrollTop: $item.offset().top}, animationLength);
}

享受。
每次使用给定字符串调用ScrollMe（）都会发现下一次出现的字符串如果使用不同的字符串调用它，结果不会重置（尽管它们很容易）需要对代码进行一些修改以支持包含非字母数字字符的字符串我相信你会聪明地找出如何突出显示/更改所选元素的颜色。

Answer 4

我不知道这是完全你所追求的是什么，但它应该提供一个起点：

http://jsfiddle.net/massivepenguin/pnu37/18/

我添加了一个搜索表单，以便您找到特定的字词......

jQuery循环文本出现

4 个答案: