Wrapping each character in a span

Question

I'm trying to wrap each number in a span.

Here is where I'm at.

<div class="numbers">12345</div>
<div class="numbers">12345</div>
<div class="numbers">12345</div>

$('.numbers').each(function (index) {
    var characters = $(this).text().split("");
    $(this).empty();

    $.each(characters, function (i, el) {
    $(this).append("<span>" + el + "</span");
    });

});

Where could I be going wrong with the syntax?

score 11 · Answer 1 · answered Feb 20 '14 at 02:27

11

You can use a simple regex like

$('.numbers').html(function (i, html) {
    return html.replace(/(\d)/g, '<span>$1</span>');
});

Demo: Fiddle

Or

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

Demo: Fiddle

answered Feb 20 '14 at 02:27

Arun P Johny

384,651
66
527
531

this messes up any dom element that has children with other dom tags – Macumbaomuerte Apr 01 '22 at 10:03

score 4 · Accepted Answer · answered Feb 20 '14 at 02:09

this in the $.each is not the same in the this in $('.numbers').each so you'll have to save it to a variable to use it there.

$this = $(this);
$this.empty();
$.each(characters, function (i, el) {
    $this.append("<span>" + el + "</span");
});

http://jsfiddle.net/phA8q/

score 2 · Answer 3 · edited Sep 08 '21 at 14:57

this is not what you think it is here

$(this).append("<span>" + el + "</span");

adding a console line shows you what this is

console.log(this); //String {0: "1", length: 1}

You need to get the this from the outside scope, Store it in a variable and reference it.

var elem = $(this);
var characters = elem.text().split("");
elem.empty();

$.each(characters, function (i, el) {
    elem.append("<span>" + el + "</span");
});

Wrapping each character in a span

3 Answers3

Linked