Question

我有大约100个页面都有<ul> - 问题是，我需要将每个列表项包装在<span>中。我已添加以下代码

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

这是我得到的结果：

ICD-10过渡ICD-10过渡ICD-10过渡

定价透明度定价透明度定价透明度

患者和付款人组合波动

患者和付款人组合波动患者和付款人组合波动

当我只希望代码运行一次并替换代码一次而不是两次时，代码被替换两次。我想知道如何解决这个问题，但更多的是为什么这首先发生在一起。该方法没有被调用两次 - 所以为什么会这样。

非常感谢你帮助我弄清楚!!!我得到了它... ...

  $(document).ready(function () {

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

        });
    });

非常感谢你!!!!!!!!

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

Working demo

Answer 3

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

追加添加到列表元素内容。

您可以执行以下操作：

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

Answer 4

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

如何替换“li”中的文本

4 个答案: