Question

以下是测试用例：
 Loading map... 

我正在尝试动态（通过jQuery），仅更改＆＃34;加载地图......＆＃34;这个标记的一部分。我意识到我每次都可以重建整个内部内容，合并并替换，但我很想知道是否有支持的api方法。

我认为 $（＆＃39; #loading＆＃39;）。文字（＆＃39;新邮件＆＃39;）可以使用，但会删除标记。

Answer 1

您可以使用获取文本节点的对象并使用textContent：

设置内容

<div class="progress-bar" progress-bar-success="" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width:100%"></div>

＆＃13;

$('#loading').contents().last()[0].textContent='new message';

＆＃13;

$('#loading').contents().last()[0].textContent='new message';

＆＃13;

Answer 2

function changeText(newText){
curI = $('#loading > i')[0].outerHTML;
$('#loading').html(curI + newText);
}

changeText('Hey. I am the new text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<span id='loading' class="pad"> <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> Loading map... </span>

顺便说一句，如果你可以将可更改的文本包装在另一个标签中，那么，无论父母如何，你都可以直接更改它。

Answer 3

您可以使用.filter()方法解决此问题，例如：

$('#loading').contents().filter(function() {
    return this.nodeType === 3
}).each(function(){
    this.textContent = this.textContent.replace('Loading map...','new message');
});

简单演示：

$('#loading').contents().filter(function() {
    return this.nodeType === 3
}).each(function(){
    this.textContent = this.textContent.replace('Loading map...','new message here...');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<span id='loading' class="pad"> <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> Loading map... </span>

如果您检查浏览器控制台，您会发现元素仍然存在，此处未显示，因为此处未包含font-awesome。（编辑：还添加了fa css。）

Answer 4

如果你要做的是替换所有未包含在任何子元素中的文本，我可以看到的最常用的方法是将元素的内容设置为它的子元素（省略纯文本内容），然后附加所需的文本，如下所示：

$('#loading').html($('#loading').children()).append('new message');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='loading' class="pad">
  <div>static element of any kind</div>
  text to replace
</span>

但是，最直接的方法是从头开始定义元素，然后为其设置新内容。

$('#message').text('new message');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='loading' class="pad">
  <div>static element of any kind</div>
  <div id="message">text to replace</div>
</span>

用jQuery替换html元素的文本内容，保留字体awesome i标签

4 个答案: