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

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>

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