How to replace text in a "li"

Question

I have about 100 pages all with an <ul> - the problem is, I need to wrap each list item in a <span>. I've added the code below

<ul style="list-style-type: disc; margin-left: 40px; line-height: 140%;" _mce_style="list-style-type: disc; margin-left: 40px; line-height: 140%;">
    <li> ICD-10 transition </li>
    <li> Pricing transparency </li>
    <li>Patient and payor mix fluctuation<br>&nbsp;</li>
</ul>  

$(document).ready(function () {
    $("li").each(function (index) {
        $("li:nth-last-child(" + index + ")").append(" <span>" + $("li:nth-last-child(" + index + ")").text() + "</span>");
    });
});

This is the result I get:

ICD-10 transition ICD-10 transition ICD-10 transition

Pricing transparency Pricing transparency Pricing transparency

Patient and payor mix fluctuation

Patient and payor mix fluctuation Patient and payor mix fluctuation

The code is being replaced twice when I only want the code to run once and replace the code one time - not twice. I'd like to know how to fix this but more so why this is even happening in the first place. The method isn't being called twice - so why is it happening.

---

Thank you guys so much for helping me figure out!!! I got it working with this...

  $(document).ready(function () {

        $("li").each(function (index) {
            $(this).html("<span>" + $(this).html() + "</span>");

        });
    });

Thank you so very much!!!!!!!!

Answer 1

You can do it like following.

$("li").each(function () {
    $(this).html('<span>'+$(this).html()+'</span>');
});

Answer 2

This is happening because when you append the span you keep the text in the li, so it is showed twice. You can change the append() to html() in order to clear the content in the li and replace with the new span:

$("li:nth-last-child(" + index + ")").html(" <span>" + $("li:nth-last-child(" + index + ")").text() + "</span>");

Working demo