jQuery - 獲取單個字母的偏移量

Question

我有一些自動生成的跨度，我需要找到一種方法讓jQuery獲得特定字母的位置。

例如：
如果跨度爲：<span>300 x 9</span>
而第二個跨度爲：<span>400 x 30</span>

如果我有一個公式來計算出零是在哪個位置，如何將我得到的偏移該跨度中的數字？因此，對於第一個跨度，我將如何在300的末尾獲得零點的偏移量，對於第二個跨度，我將如何針對30中0的偏移量？

基本上我缺乏一些邏輯來填補如何針對jQuery中的單個字母的空白？如果不打破更多元素的範圍，這是可能的嗎？

編輯：這將用於動畫的目的，基本上有一個元素出現在零，然後移動到不同的位置..我只需要動畫的開始位置在最後。不知道這是否是必要的信息。

Answer 1

如果沒有首先將其封裝在自己的元素中，您將無法獲得偏移量。你可以將每個元素包裝在它自己的元素中，沒問題。就在值映射到包含在單個元素的值，並加入起來：

var parts = $.map($('span').text().split(""), function(v){ 
    return '<span>'+v+'</span>'; 
}).join("") 
$('span').html(parts); 

然後，您可以得到可能的任何跨度的偏移量。如果，例如，我們希望得到的在我們的原始字符串中發現的第二個0的偏移量，我們可以做像這樣：

var cords = this.find('span').filter(":contains('0')").eq(1).offset(); 

當你有偏差，你只需要原來的HTML字符串放回在你的父母<span>。

如果你把所有這些組合起來，你可以讓自己一個不錯的小插件：

$.fn.letterOffset = function(v,i){ 
    var orig = this.text(), parts = $.map(orig.split(""), function(v){ 
     return '<span>'+v+'</span>'; 
    }).join(""); 
    this.html(parts); 
    var cords = this.find('span').filter(":contains('"+v+"')").eq(i?i-1:0).offset(); 
    this.html(orig); 
    return cords; 
} 

要返回左偏移現在第二爲零，我們會做：

var offsetOfSecondZero = $('span').letterOffset("0",2).left 

我已使用<span> s來包裝每個字母，但您可以使用任何您想要的元素。請記住，您想使用inline元素。

JSFiddle