0

Hi I am using the suffix function to add the th, st and rd to numbers, but I am trying to wrap the actual suffix with a span, somehow it doesn't work, not sure why.

Thanks for the help, it worked switch it to html, is there any chance to remove the counter itself, as I am getting all the numbers from the DB, just need to add the suffix to the number, not both. I removed the numbers from the divs and still get the numbers.

here is the code

<div></div>
<div></div>
<div></div>
<div></div>

$("div").html(function (i, t) {
        i++;
        var str = i.toString().slice(-1),
            suffix = '';
        switch (str) {
            case '1':
                suffix = i.toString().slice(-2) === '11' ? 'th': 'st';
                break;
            case '2':
                suffix = i.toString().slice(-2) === '12' ? 'th' : 'nd';
                break;
            case '3':
                suffix = i.toString().slice(-2) === '13' ? 'th' : 'rd';
                break;
            case '4':
            case '5':
            case '6':
            case '7':
            case '8':
            case '9':
            case '0':
                suffix = 'th';
                break;
        }
         return i + '<span>' + suffix + '</span>';
    });
dikei
  • 439
  • 1
  • 6
  • 12
  • here's another answer that shows how you could implement this functionality. http://stackoverflow.com/a/13627586/526704 – DLeh Jan 29 '15 at 14:51

1 Answers1

2

does it work if you change .text() to .html()?

<div>1</div>
<div>2</div>    
<div>3</div>
<div>4</div>

$("div").html(function (i, t) {
    i++;
    var str = i.toString().slice(-1),
        suffix = '';
    switch (str) {
        case '1':
            suffix = i.toString().slice(-2) === '11' ? 'th': 'st';
            break;
        case '2':
            suffix = i.toString().slice(-2) === '12' ? 'th' : 'nd';
            break;
        case '3':
            suffix = i.toString().slice(-2) === '13' ? 'th' : 'rd';
            break;
        case '4':
        case '5':
        case '6':
        case '7':
        case '8':
        case '9':
        case '0':
            suffix = 'th';
            break;
    }
     return i + '<span>' + suffix + '</span>';
});

example: http://jsfiddle.net/2d02k5ou/

Dhunt
  • 1,584
  • 9
  • 22
  • Actually, that is what I've tried and it worked, thanks – dikei Jan 29 '15 at 14:55
  • Thanks for the help, it worked switch it to html, is there any chance to remove the counter itself, as I am getting all the numbers from the DB, just need to add the suffix to the number, not both. I removed the numbers from the divs and still get the numbers. here is my fiddle - http://jsfiddle.net/2d02k5ou/1/ – dikei Jan 30 '15 at 15:35
  • Sorry, I'm not sure what you mean. – Dhunt Jan 31 '15 at 22:59