我如何在每个字母周围包裹一个跨度

Posted 2021-04-08

我已经尝试过但未能将每个数字包装在自己的跨度中>一个

html范例

<div class="ls_team_points">10.1</div>
<div class="ls_team_points">9.4</div>
<div class="ls_team_points">0</div>
<div class="ls_team_points">17</div>

我希望最终的html看起来像这样

<div class="ls_team_points"><span><a>1</a></span><span><a>0</a></span><span><a>.</a></span><span><a>1</a></span></div>
<div class="ls_team_points"><span><a>9</a></span><span><a>.</a></span><span><a>4</a></span></div>
<div class="ls_team_points"><span><a>0</a></span></div>
<div class="ls_team_points"><span><a>1</a></span><span><a>7</a></span></div>

我尝试过，但是不知道如何使其正常工作

$('.ls_team_points').html(function (i, html) {
    var chars = $.trim(html).split("");
    return '<span><a>' + chars.join('</span><span>') + '</a></span>';
});

答案

您需要关闭并重新打开join（）上的标签“ a”

$('.ls_team_points').html(function (i, html) {
    var chars = $.trim(html).split("");
    return '<span><a>' + chars.join('</a></span><span><a>') + '</a></span>';
});

另一答案

尝试一下：

$('.ls_team_points').each(function(){
  $(this).html(function (i, html) {
    var str = '';
    for (var i=0; i < html.length; i++) {
       str += '<span><a>' + html.charAt(i) + '</a></span>';
    }
    return str;
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ls_team_points">10.1</div>
<div class="ls_team_points">9.4</div>
<div class="ls_team_points">0</div>
<div class="ls_team_points">17</div>

以上是关于我如何在每个字母周围包裹一个跨度的主要内容，如果未能解决你的问题，请参考以下文章

如何将 link_to 包裹在一些 html ruby​​ 代码周围？

android跨度点击事件

如何在球体周围“包裹”方形图像

如何使用 jQuery 插入一个包裹在可变数量子元素周围的 <DIV> ？

如何将 div 包裹在多个相同的类元素周围

2021-12-24：划分字母区间。 字符串 S 由小写字母组成。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。返回一个表示每个字符串片段的长度的列表。 力扣763。某大厂面试