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

У меня есть содержимое, которое жестко разрывается и автоматически переносится в контейнер div. Когда пользователь нажимает на слово (или изображение), я хочу определить, какой «номер строки» был нажат. Я изучил объекты DOM уровня 2, такие как Range и Selection, но, похоже, нет никакого незапутанного способа, который я мог бы придумать, чтобы сделать это. Как я могу это сделать?

--Редактировать--

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

Вот моя попытка использовать метод jquery index (): http://plnkr.co/edit/dayeGALdxTAC0HadjGIi?p=preview

Проблема в том, что он дает мне строку исходного кода; Мне интересно узнать, на какой строке он фактически отображается.


javascript jquery dom textnode
person user3508264    schedule 22.12.2015    source источник
comment
Нажата строка this, доступ к которой можно получить с помощью $(this) внутри обработчика   -  person Tushar    schedule 22.12.2015
comment
Может быть, это может помочь: jsfiddle.net/05od25qy   -  person Rayon    schedule 22.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Одним из возможных способов может быть использование верхнего смещения диапазона. Если верхнее смещение диапазона больше, чем у его непосредственного предшественника, то произошел разрыв строки.

переменная строка = 0; вар пред. = 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>

person Ankit    schedule 22.12.2015