找到元素中每行的y位置？

Question

我有一个包含代码示例的div（如github中的gist），它会突出显示语法。我还添加了一个小的div，绝对位于代码示例的左上角，我想移动到不同的行。

您可以在提供的图片的左上角看到标记为>的div。我希望能够将指针移动到特定的代码行。

我尝试在split上使用\n并测量第一行字符的高度，并将该数字乘以我想要的索引，但出于某种原因，这有点偏差。

以下是我尝试的一些代码：

//The code in a pre.. the {{}} is my template code. 
<pre class="code-view" data-id="{{ file.id }}"><code>{{ file.content }}</code></pre>
//The pointer
<div id="pointer">&gt;</div>
//move the pointer to the top left corner of the code sample
$("#pointer").css("left",$("pre.code-view:visible").first().position().left)
$("#pointer").css("top",$("pre.code-view:visible").first().position().top)

//this logs to 15
var c = 0;
var lineHeight = $("span.hljs-comment:visible").first().height();
    //I have multiple pre's on the screen. Only first one is visible.
var codeTop = $("pre.code-view:visible").first().position().top;
function moveToNextLine(){
    c++
    console.log(c,lineHeight,codeTop)
    $("#pointer").css("top",codeTop + (lineHeight * c));
};
moveToNextLine()
moveToNextLine()
moveToNextLine()

Answer 1

我最后做的是将div的文字拆分为\n换行符。然后我用class="code-line"包围了每个换行符。这样我就可以获得div中每行代码的位置。