如何检测单击了哪一行

Question

我的内容在div容器中难以破解和自动包装。 当用户单击一个单词（或图像）时，我要检测单击了哪个“行号”。 我已经研究了诸如范围和选择之类的DOM级别2对象，但是似乎没有想到可以完成此工作的任何复杂方法。 我怎样才能做到这一点？

- 编辑 -

    $('span').click(function() {
    alert($(this).index())
})

这是我尝试使用jquery的index（）方法： http : //plnkr.co/edit/dayeGALdxTAC0HadjGIi?p=preview

问题是它给了我源代码的那一行； 我有兴趣知道它实际绘制在哪条线上。

Answer 1

一种可能的方法是使用跨度的顶部偏移。 如果跨度的顶部偏移量大于其前身的偏移量，则发生换行。

var line = 0; var prev = 0;

$("span").each(function(e, i) {

  var currentSpan = $(i);
  if (currentSpan.offset().top > prev) {
    line++;

  }
  currentSpan.attr('data-line-number', line);
  prev = currentSpan.offset().top;
})


$("span").click(function() {
  alert($(this).attr('data-line-number'))
})

注意 ：

• 假定每个单词都包含在span标签中。
• 空的新行可能会导致错误的行为。

 var line = 0; var prev = 0; $("span").each(function(e, i) { var currentSpan = $(i); if (currentSpan.offset().top > prev) { line++; } currentSpan.attr('data-line-number', line); prev = currentSpan.offset().top; }) $("span").click(function() { alert($(this).attr('data-line-number')) }) 

 #content { width: 200px; border: solid 2px black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span> <span>BBB</span><span>BBB</span><span>BBB</span><span>CC</span> <span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span> <span>AAA</span> <span>BBB</span><span>BBB</span><span>BBB</span><span>CC</span> </div>