Javascript jQuery-获取span中单个字母的偏移量

Javascript jQuery-获取span中单个字母的偏移量,javascript,jquery,html,Javascript,Jquery,Html,我有一些自动生成的跨距,我需要找到一种方法让jQuery获得特定字母的位置 例如: 如果跨度为:300 x 9 第二个跨度是:400x30 如果我有一个公式来计算零在哪个位置,我如何得到这个数字在跨度中的偏移量?那么对于第一个跨度,我如何得到300结尾处零的偏移量,对于第二个跨度,我如何确定30中0的偏移量 基本上,我缺少一些逻辑来填补JQuery中单个字母的空白。在不将跨度拆分为更多元素的情况下,这是可能的吗 编辑:这将用于动画目的,基本上是让一个元素出现在零上,然后移动到另一个位置。。我只需

我有一些自动生成的跨距,我需要找到一种方法让jQuery获得特定字母的位置

例如:
如果跨度为:
300 x 9

第二个跨度是:
400x30

如果我有一个公式来计算零在哪个位置,我如何得到这个数字在跨度中的偏移量?那么对于第一个跨度,我如何得到300结尾处零的偏移量,对于第二个跨度,我如何确定30中0的偏移量

基本上,我缺少一些逻辑来填补JQuery中单个字母的空白。在不将跨度拆分为更多元素的情况下,这是可能的吗


编辑:这将用于动画目的,基本上是让一个元素出现在零上,然后移动到另一个位置。。我只需要在最后动画的起始位置。不确定这是否是必要的信息。

如果不先将字母包装在其自身的元素中,则无法获得字母的偏移量。您可以将每个元素包装到它自己的元素中,这没有问题。只需将这些值映射到各个元素中包含的值,并将它们连接起来:

var parts = $.map($('span').text().split(""), function(v){
    return '<span>'+v+'</span>';   
}).join("")
$('span').html(parts);
当有偏移量时,只需将原始HTML字符串放回父项

如果您将所有这些放在一起,就可以让自己成为一个不错的小插件:

$.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;
}
我在这里使用了
s来包装每个字母,但是您可以使用您想要的任何元素。请记住,您希望使用
内联
元素


需要澄清的是:您希望检索span标记中特定字母页面中的(x,y)坐标?这是可能的,但不会很简单。你能发布你当前的动画代码,这样我们就可以把它作为一个起点吗?这个怎么样@FrédéricHamidi它只是将GSAP与TweenMax.from(roundBall,0.25,{left:storedOffsetLeft,top:storedOffsetTop})一起使用,如果文档的CSS包含
span
元素上的样式呢?将每个字母包装在自定义元素中怎么样:
返回“”+v+”这是OP会改变的事情。我只能继续提供的信息。使用
只是此演示的一个示例。OP指定他们正在制作
span
的动画,但您的解决方案是使用完全独立的
span
元素来计算字母偏移量。我建议您将解决方案映射中的
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