How to replace text in a “li”

Refresh

December 2018

Views

136 time

4

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

4 answers

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

Append добавляет на содержимое элемента списка.

Вы можете сделать что-то вроде:

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

Это происходит потому , что , когда вы добавите spanвы сохранить текст в li, поэтому он показал дважды. Вы можете изменить append()для html()того , чтобы очистить содержимое в liи заменить на новый span:

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

Работа демо

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

Вы можете сделать это после.

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