Question

我试图获得每个段落中句子的左侧位置值。我尝试了.offset（）。left和position（）。left但是它们都返回错误/意外值。他们总是回归18岁。

var offset = $(this).offset();
var position = $(this).position();
$('i').html(offset.left + " - - - " + position.left);//display

看起来像单行的跨度返回正确/好的值但多行句子没有。

我正在尝试显示工具提示，我需要始终在div＃frame元素中显示它。我试图获得句子开头的左侧值，以便我可以在正确的位置显示工具提示。

任何人都知道为什么它没有显示正确的值，或者我如何判断句子是从左侧，中间还是右侧开始。

感谢。

Answer 1

返回的值不是错误的。＆＃34;该元素基本上被包装在一个不可见的框中，并返回该框的左偏移量。由于它跨越多行，该偏移量等于段落的左边距，这不是您所期望的。您想要的是<span>的第一个字母的偏移量，而不是整个<span>的偏移量。

尝试使用this answer上的变体将新子span换到字符串的第一个字母周围，然后获取偏移量。

function spanFirstLetter(elem) {
  var elem = $(elem).contents().filter(function() {
      return this.nodeType == 3
    }).first(),
    text = elem.text().trim(),
    first = text.slice(0, 1);
  if (!elem.length) return;

  elem[0].nodeValue = text.slice(first.length);
  // wrap the first letter in a unique class
  elem.before('<span class="first-letter">' + first + '</span>');
};

$('#frame p').find('span').hover(
  function(e) {
    // IN
    $(this).addClass('y');
    spanFirstLetter(this); // wrap the first letter
    var offset = $('.first-letter',this).offset(); 
  // get the first letter offset
    var position = $('.first-letter',this).position();
    $('i').text(offset.left + " - - - " + position.left);

  },
  function(e) {
    // OUT
    $(this).removeClass('y')
        .find('.first-letter').replaceWith($('.first-letter',this).text());
  // remove the first-letter span by replacing it with its own .text()
  }
)

https://jsfiddle.net/9tgkvqgk/5/

Jquery offset（）。left和position（）。left返回意外值

1 个答案: