html - How to replace text in a "li" - Stack Overflow

admin管理员组

文章数量:1406951

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!!!!!!!!

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!!!!!!!!

• html
• javascript
• jquery

Share Follow edited Jan 29, 2016 at 0:10 Dr. Div asked Jan 28, 2016 at 18:35 Dr. DivDr. Div 9811414 silver badges2727 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can do it like following.

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

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

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

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

本文标签： htmlHow to replace text in a quotliquotStack Overflow