Верхняя позиция текста, распределенная по двум столбцам

Question

У меня проблема с установкой верхней позиции для текста. Есть основной div с "column-count:2", а внутри есть некоторый текст, который распространяется на два столбца. Текст делится на разные тэги, называемые "сен". Есть также некоторый текст, который выделен некоторым классом. Теперь мне нужно найти верхнюю позицию выделенного текста, которая распределена по обоим столбцам, но это дает мне неправильное значение позиции, т.е. верхнюю позицию во втором столбце, т.е. 0

Вот ссылка на скрипку, чтобы получить ясное представление: https://jsfiddle.net/trupti11/1gt0bf54/

$(function() {
  //This gives top as 0 even though some part of class "h45" is at bottom
  console.log("position sen tag with class h45 " + $('.h45').position().top);

  //This gives correct position of class "span_1892"
  console.log("position span " + $('.span_1892').position().top);

  //problem here: This gives wrong position of class "span_1893" which needs to be something 65px
  console.log("position span " + $('.span_1893').position().top);
});

.textBox {
  width: 500px;
  height: 200px;
  column-count: 2;
  margin: 0;
  padding: 0;
  position: relative;
}

span {
  background-color: #ff0;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
  <sen name="44" class="h h44">
    Barnitz erwiderte seinen Gruß und verharrte einen Moment lang in dieser Pose, als erwarte er, für ein Propagandaplakat <span class="span_1892">fotografiert</span> zu werden.</sen>
  <sen name="45" class="h h45"> Es wäre nicht das <span class="span_1893">erste Mal gewesen, denn</span> so hochgewachsen, kräftig und blond wie er war, verkörperte er das arische Ideal.</sen>
</div>

Answer 1

Вероятно, самый простой способ сделать это - добавить высоту столбца один к позиции, которую вы найдете во втором столбце:

function getPosition(target){
  var col = target.closest("sen");
  var h_span = 0;
  //Loop through all "sen" items
  $.each($("sen"), function(i, val){
    //Exit when found the "sen" contains my target
    if(!$(val).find(target).length){
      h_span += $(val).height();
    }else{
      return;
    }
  });
  return text_pos = h_span + target.position().top;
}

var target = $('.span_1893');
console.log("position span is "+ getPosition(target));

.textBox {
  width: 500px;
  height: 200px;
  column-count: 2;
  margin:0;
  padding:0;
  position:relative;
}

span {
  background-color:#ff0;
  padding:0;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textBox">
<sen name="44" class="h h44">
Barnitz erwiderte seinen Gruß und verharrte einen Moment lang in dieser Pose, als erwarte er, für ein Propagandaplakat <span class="span_1892">fotografiert</span> zu werden.</sen>
<sen name="45" class="h h45"> Es wäre nicht das <span class="span_1893">erste Mal gewesen, denn</span> so hochgewachsen, kräftig und blond wie er war, verkörperte er das arische Ideal.</sen>
</div>

Я надеюсь, что это поможет вам. до свидания