修改 li 的子集 [重复]答案

【问题标题】：Modify subset of li [duplicate]修改 li 的子集 [重复]
【发布时间】：2016-02-16 00:30:49
【问题描述】：

我的 HTML 是：

<ul id="info">
  <li>
    <span>Name:</span>Charis Spiropoulos
  </li>
  ...

我想更改不在跨度内的<li> 部分。如何做到这一点？到目前为止，我有：

$("#info li:first").text(player);

编辑：

我尝试了建议的重复项的解决方案：

$("#info li:first").clone()
            .children()
            .remove()
            .end()
            .text("foo");

它没有用！

【问题讨论】：

标签： javascript jquery html list

【解决方案1】：

如果您要替换的文本始终是 <li> 中的最后一件事，那么简单的字符串替换应该可以解决问题：

var newText = "Panagiotis";
$("#info li:first").html($("#info li:first").html().replace(/[^>]+$/, "") + newText);

快速解释：这个正则表达式 - /[^>]+$/ - 将找到最后一个 > 和文本结尾之间的所有字符，并且 replace() 函数简单地删除它们。然后你只需在新名称后面加上+。

【讨论】：

【解决方案2】：

从Andreas提供的link，你可以做

$("#info li:first").clone()
            .children()
            .remove()
            .end()
            .text();

代码很容易解释，但它的作用是克隆列表元素，删除其所有子标签（在您的情况下为 span 标签），然后返回剩下的文本。

【讨论】：

哦，现在我明白了。看起来很重。不过感谢您的解释，+1！
但是，这不会起作用。

【解决方案3】：

您还可以使用以下另一种方法：

var firstLi = $("#info li:first").get(0); //get raw DOM element;
var newContent = "Hi";
//If textContent is defined use it, otherwise use innerText:
firstLi.childNodes[2].textContent ? firstLi.childNodes[2].textContent = newContent : firstLi.childNodes[2].innerText = newContent;

【讨论】：

这应该比接受的答案更快，对吧？它有效，现在 +1。

【解决方案4】：

var htmlCont  = $("#info li:first").html();
$("#info li:first").html("");
$("#info li:first").prepend(player+htmlCont);

【讨论】：

请解释代码。
这是错误的@gsamaras 吗？
一点。我想将Name: Charis 更改为Name: Panagiotis，但使用您的代码我得到Name: Panagiotis Charis。