Как я могу обернуть промежуток вокруг каждой буквы

Question

Я пытался, но не смог обернуть каждое число в его собственный диапазон> a

пример 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>';
});

Answer 1

Вам нужно закрыть и снова открыть тег «a» в join ()

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

Answer 2

Попробуйте это:

$('.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>