Как определить, какая строка была нажата

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>