Question

我的内容是在div容器中硬破坏和自动装配。当用户点击单词（或图像）时，我想检测单击了哪个“行号”。我已经研究过DOM Level 2对象，比如Range和Selection，但似乎没有任何非复杂的方法可以让我想到这样做。我怎样才能做到这一点？

- 编辑 -

    $('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>

如何检测单击了哪一行

1 个答案: