Question

我在设置文本的顶部位置时遇到问题。有一个主要的div＆＃34;列数：2＆＃34;在里面有一些文本在两列中传播。文本分为不同的标签，呼叫＆＃34; sen＆＃34;。还有一些文本用某些类突出显示。现在我需要找到分布在两列中的突出显示文本的顶部位置但它给了我错误的位置值，即第二列中的顶部位置，即0

这是获得清晰想法的小提琴链接： https://jsfiddle.net/trupti11/1gt0bf54/

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

我希望它可以帮到你。再见

文本的顶部位置分布在两列

1 个答案: