如何替换“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

Answer 3

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

Append adds onto the list element content.

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>");
});