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

Question

我有一个包含代码示例的div (就像github中的gist )，它会突出显示语法。我还在代码示例的左上角添加了一个小div，我希望将其移动到不同的行。

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

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

​

​

下面是我尝试过的一些代码：

//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

我最后做的是用\n换行符拆分div的文本。然后，我使用class="code-line"将每个换行符包装在一个跨度中。这样我就可以得到每一行代码在div中的位置。