How to replace text in "li"

Question

I have about 100 pages with <ul>- the problem is that I need to wrap each list item in <span>. I 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>");
    });
});

As a result, I get:

Transition ICD-10 Transition ICD-10 Transition ICD-10

Price Transparency Price Transparency Price Transparency

Dispersion of pulse and payer

Fluctuation of the target of the patient and the payer Fluctuation of the pulse and the payer

The code is replaced twice when I only want the code to run once and change the code once, and not twice. I would like to know how to fix it, but especially why this happens in the first place. The method is not called twice - so why does this happen.

---

Thanks guys for helping me figure it out !!! I started working with this ...

  $(document).ready(function () {

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

        });
    });

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

Answer 1

, .

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

Answer 2

, , span, li, . append() html(), li span:

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

Answer 3

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

Adds an addition to the contents of a list item.

You can do something like:

$(document).ready(function () {
    $("li").each(function (index, el) {
        $(el).html(" <span>" + $(el).text() + "</span>");
    });
});

Answer 4

$(document).ready(function() {
   $("li").wrap("<span></span>");
});