Jquery offset(）.left和position(）.lift返回意外值

Jquery offset().left and position().left returns unexpected value

本文关键字：返回 意外 lift offset left Jquery position      更新时间：2023-09-26

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

看看：https://jsfiddle.net/9tgkvqgk/1/

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

看起来只有一行的span返回正确/良好的值，但多行的句子则不然。

我正在尝试显示一个工具提示，我需要始终在div#frame元素中显示它。我试图得到句子开头的左边值，这样我就可以在正确的地方显示工具提示。

任何人都知道为什么它没有显示正确的值，或者我如何找出这个句子是从左边、中间还是右边开始。

谢谢。

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

试着使用这个答案的变体，将新的子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/

相关文章：