Jquery 如何获取第一个跨距的百分比数据，并根据百分比填充颜色？

这是我的完整代码

$（函数（）{
$（“.animation”）.each（函数（）{
var s=$（this.text（）+'100%'；
$（this.css（{“背景大小”：s}）
});
});
。平均百分比{
边缘底部：0.2米；
边缘顶部：0.2米；
}
.flex{
显示器：flex；
}
.亲戚{
位置：相对位置；
}
.非常满意{
背景图像：线性渐变（向右，#57bb8a，#57bb8a）；
}
.动画{
宽度：90%；
背景大小：1%100%；
背景重复：无重复；
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
证明内容：之间的空间；
}
.动画跨度：第n个类型（1）{
显示：无；
}
span.avg-vote{
弹性：1；
左：1米；
字号：0.8em；
对齐项目：居中；
显示器：flex；
垂直对齐：中间对齐；
}

50%
HTML：

<div class="avg-percent div flex relative">
    <div class="animation very-satisfied">
        <span id="valuetouse">10%</span>
        <span class="avg-vote">0</span>
    </div>
</div>

给第一个span（用于确定背景大小的span）一个ID，如果值是纯整数，则在此span上使用Number（）或parseInt（），但如果它们是实数，则使用parseFloat（）。
如果我理解正确，则尝试使用“avg投票”的内容要确定背景颜色栏的宽度，在这种情况下，JS将使用span为父级设置CSS：

$('.animation span').each(function(){
  var s = $(this).text() + ' 100%';
  $(this).parent().css('background-size', s);
});

制作动画最简单的方法是添加如下内容

.animation {transition-duration: 1s;}

例如，如果
$（this）.text（）+'100%'
中的text（）是Hello，那么s=“Hello 100%”不是背景大小的有效值。@bron我使用的示例
avg vote
不负责背景的动画或填充，负责这个的是第一个以百分比显示值的“span”。好的，佩佩，我已经编辑了我的答案并测试了它。仍然不起作用。我使用的是第一个
span
，它已经有了带有百分比符号的数字数据，
span
负责填充背景色。在这种情况下，您需要$（'.animation span:first child'）而不是$（'.animation span'）。嗨，佩佩，我想知道这是否对你有帮助！你能快速更新一下吗？
.animation {transition-duration: 1s;}