3

在我的 div 标签中，有很多行非常长的文本，并且 div 元素当前是可滚动的。我想做的是找到特定字符串的第一次出现并自动滚动到包含该字符串的行。没有换行符或任何类型的字符串分隔符，我可以使用它来轻松近似滚动位置。

我想我可以做这样的事情：

var max_chars_per_line = approximated max # of chars that can fit into one line;
var font_height = approximated font height in px;
var needle = string to look for;
var haystack = content in the <div> tag;
var index = haystack.indexOf(needle);
var num_lines_to_skip = index / max_chars_per_line;
my_div_tag.scrollTo(num_lines_to_skip * font_height);

我不禁想知道是否有更好的（javascript/jQuery）解决方案。我自己的尽职调查没有发现任何问题。

4

3 回答 3

1

如果您的所有文本都在一个 div 中，则类似此解决方案的方法有效。

var goto = function(str){

    var content = $('#content').html();
    $('#content').html( content.replace(str,'<a name="goto">'+str+'</a>') );
    window.location = '#goto';
}

goto('Whatever your string is here');

http://jsfiddle.net/NmhHH/

于 2012-11-25T05:20:09.067 回答
1 
<p id="text">Lorem ipsum ... lots of text.... onion</p>

问：

var needle = 'onion';
$('#text').html($('#text').html().replace(needle, '<a id="imhere"></a>'+needle));
$('html,body').animate({scrollTop: $('#imhere').offset().top​}, 500);​​​​​​​​​​​​

演示http://jsfiddle.net/vq7LD/

于 2012-11-25T05:20:22.170 回答
-1

你不能做一些类似于使用以下 Java 类型代码的事情吗：

  var lineToTest = getLine(textArray);

  if(lineToTest.contains(testingLine){
   lineIndex = getLineNumber(textArray-1); //since it already accessed the line it'll have to access the next and subtract 1. }

然后只需使用任何突出显示技术来突出显示该行。您显然必须创建您的 getLine、getLineNumber 函数。除非那里有一些很酷的 jQuery 函数（可能就是这种情况）。

于 2012-11-25T05:18:49.940 回答