Javascript 找到元素中每条线的y位置？

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

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

我尝试使用“打开拆分”并测量第一行字符的高度，然后将该数字乘以我要访问的索引，但由于某些原因，这有点不正确

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

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

//指针 //将指针移到代码示例的左上角 $pointer.cssleft，$pre.code视图：visible.first.position.left $pointer.csstop，$pre.code视图：visible.first.position.top //这记录到15 var c=0； var lineHeight=$span.hljs注释：visible.first.height； //我在屏幕上有多个pre。只有第一个是可见的。 var codeTop=$pre.code视图：visible.first.position.top； 函数moveToNextLine{ C++ 控制台。logc，线路高度，代码顶部 $pointer.csstop，代码顶+线宽*c； }; moveToNextLine moveToNextLine moveToNextLine

---

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

请解释您正在尝试做什么，而不是您目前正在做什么。也许你的问题还有另一个解决方案，而不是试图修正你的方法。你想用y坐标做什么？或者你是指行/行号而不是Y坐标？你能给我们看一下你描述的HTML片段的简短摘录吗？@JosephDreamer我真的很累，对不起。我重写了问题，让我知道这是否更清楚。