CODEWITHSUNDEEP
htmljavascriptjquery
Dr. Div
Dr. Div

Reputation: 971

How to replace text in a "li"

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

Upvotes: 4

Views: 687

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can do it like following.

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

Upvotes: 6

Per &#214;stlund
Per &#214;stlund

Reputation: 1224

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

Upvotes: 0

Garrett
Garrett

Reputation: 1688

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

Upvotes: 0

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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

Upvotes: 5

Related Questions